/*仅适用于内容中点击元素。对于拖动等元素,需要自行在页面处理。
* 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素。
* 如果手指移动距离小于10像素,则还是认为用户在做点击操作。如果移动距离超过了10像素,则取消后续事件监听函数的执行。*/

  1.  
  2. <script type="text/javascript">
  3. function makeTouchableButton(ele) {
  4. if (!ele) {
  5. console.error("MIGlobals.makeTouchableButton 无效的元素!");
  6. return false;
  7. }
  8.  
  9. ele.addEventListener("touchstart", function(evt){
  10. this.setAttribute("data-moved", "n");
  11. var p = evt.touches[0];
  12. this.setAttribute("data-touch-start-clientx", p.clientX);
  13. this.setAttribute("data-touch-start-clienty", p.clientY);
  14.  
  15. });
  16.  
  17. ele.addEventListener("touchmove", function(evt){
  18. if (this.getAttribute("data-moved") == "y") return false;
  19.  
  20. var p = evt.touches[0];
  21. var startClientX = parseInt(this.getAttribute("data-touch-start-clientx"), 10);
  22. var startClientY = parseInt(this.getAttribute("data-touch-start-clienty"), 10);
  23. var deltax = p.clientX - startClientX;
  24. var deltay = p.clientY - startClientY;
  25. if (Math.abs(deltax) > 10 || Math.abs(deltay) > 10) {
  26. this.setAttribute("data-moved", "y");
  27. }
  28. });
  29.  
  30. ele.addEventListener("touchend", function(evt) {
  31.  
  32. if (this.getAttribute("data-moved") == "y") {
  33. evt.stopImmediatePropagation();
  34. return false;
  35. }
  36. });
  37.  
  38. }
  39.  
  40. var divs = document.querySelector(".touchdiv");
  41. makeTouchableButton(divs);
  42. divs.addEventListener("touchend",function(){
  43. console.log("您点击我啦。");
  44. });
  45. </script>

移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。的更多相关文章

  1. uni-app中使用scroll-view滚到底部时多次触发scrolltolower事件

    一.前言.scroll-view基本属性: 前言: 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几 ...

  2. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  3. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  4. jQuery 双击事件(dblclick)时,不触发单击事件(click)

    我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...

  5. C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件

    1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变 基本思路是: 当AddRange()后,就马上指定ListBox的SelectedIndex,这样 ...

  6. [转]jQuery 双击事件(dblclick)时,不触发单击事件(click)

    例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...

  7. 移动端 iphone touchmove滑到边界(浏览器地址拦及以上) touchend失效解决办法

    在移动端h5页面:尤其那些全屏幕的盒展示切换页面,当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域):此时,手指已经离开屏幕了,但是ios上无法监听到touchend 事件:touchen ...

  8. 盒子上下滚动到js 底部触发的事件

    //html是用法举列子,js亲测有效(把这段js#scro加到你要滚动的盒子) <div id="scro">  <div>1</div> & ...

  9. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

随机推荐

  1. Android4.0窗口机制和创建过程分析

    一  前言 在谈到这个话题的时候,脑海里面千头万绪,因为它涉及到了方方面面的知识… 比如Activity管理,窗口添加,Token权限验证等等… 既然这么复杂,那么我们就复杂的问题简单化,可以分成下面 ...

  2. QQ游戏百万人同时在线服务器架构实现

    转载自:http://morton5555.blog.163.com/blog/static/976407162012013112545710/# QQ游戏于前几日终于突破了百万人同时在线的关口,向着 ...

  3. Linux Shell编程(28)——进程替换

    进程替换与命令替换很相似. 命令替换把一个命令的结果赋给一个变量,例如 dir_contents=`ls -al`或xref=$. 进程替换则是把一个进程的输出回馈给另一个进程 (换句话说,它把一个命 ...

  4. Light OJ 1050 - Marbles(概率DP)

    题目大意: 一个包裹里有蓝色和红色的弹珠,在这个包裹里有奇数个弹珠,你先走, 你先从背包里随机的拿走一个弹珠,拿走每个弹珠的可能性是一样的.然后Jim从背包里拿走一个蓝色的弹珠,如果没有蓝色的弹珠让J ...

  5. (转载)PHP json_encode() 函数介绍

    (转载) 在 php 中使用 json_encode() 内置函数(php > 5.2)可以使用得 php 中数据可以与其它语言很好的传递并且使用它. 这个函数的功能是将数值转换成json数据存 ...

  6. Java同步

    同步:★★★★★ 好处:解决了线程安全问题. 弊端:相对降低性能,因为判断锁需要消耗资源,产生了死锁. 定义同步是有前提的: 1,必须要有两个或者两个以上的线程,才需要同步. 2,多个线程必须保证使用 ...

  7. Aix项目_shell_rsh_01

    rsh(remote shell) 功能说明:远端登入Shell. 语 法:rsh [-dn][-l <用户名称>][主机名称或IP地址][执行指令] 补充说明:rsh提供用户环境,也就是 ...

  8. Java获取当前路径

    1.利用System.getProperty()函数获取当前路径:System.out.println(System.getProperty("user.dir"));//user ...

  9. [ReadingNotes] Search the links, static final in the java

    [ReadingNotes] Search the links, static final in the java */--> pre { background-color: #2f4f4f;l ...

  10. [zz]android的logcat详细用法

    Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和一些系统的缓冲区中记录下来的,缓冲区可以通过 logcat 命令来查看和使用.      一.使用logcat命令的目的: ...