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


<script type="text/javascript">
function makeTouchableButton(ele) {
if (!ele) {
console.error("MIGlobals.makeTouchableButton 无效的元素!");
return false;
} ele.addEventListener("touchstart", function(evt){
this.setAttribute("data-moved", "n");
var p = evt.touches[0];
this.setAttribute("data-touch-start-clientx", p.clientX);
this.setAttribute("data-touch-start-clienty", p.clientY); }); ele.addEventListener("touchmove", function(evt){
if (this.getAttribute("data-moved") == "y") return false; var p = evt.touches[0];
var startClientX = parseInt(this.getAttribute("data-touch-start-clientx"), 10);
var startClientY = parseInt(this.getAttribute("data-touch-start-clienty"), 10);
var deltax = p.clientX - startClientX;
var deltay = p.clientY - startClientY;
if (Math.abs(deltax) > 10 || Math.abs(deltay) > 10) {
this.setAttribute("data-moved", "y");
}
}); ele.addEventListener("touchend", function(evt) { if (this.getAttribute("data-moved") == "y") {
evt.stopImmediatePropagation();
return false;
}
}); } var divs = document.querySelector(".touchdiv");
makeTouchableButton(divs);
divs.addEventListener("touchend",function(){
console.log("您点击我啦。");
});
</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. [PHP] 跳转以及回到原来的地址

    回到原来的地址: 1.PHP(PHP代码) Header('Location:'.$_SERVER["HTTP_REFERER"]); 2.JavaScript(相当于后退按钮,- ...

  2. 【转】Markus Persson:Minecraft 游戏背后的奇才

    转自酷勤网 Markus Persson是沙盒游戏Minecraft的开发者,在游戏中以Notch的名字为众多玩家所知,是游戏界绝对的巨星.美国<滚石>杂志的专栏作家David Peisn ...

  3. Hibernate(三)Hibernate 配置文件

    在上次的博文Hibernate(二)Hibernate实例我们已经通过一个实例的演示对Hibernate 的基本使用有了一个简单的认识,这里我们在此简单回顾一下Hibernate框架的使用步骤. Hi ...

  4. JavaScript高级程序设计14.pdf

    继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 构造函数.原型.和实例的关系:每个构造函数都有一个原型对象,每个原型对象都包含一个指向构造函数的指针,每个实例都包含一 ...

  5. TCP Connection Establishment and Termination

    Three-Way Handshake The following scenario occurs when a TCP connection is established: The server m ...

  6. linux驱动面试题目汇总

    http://blog.csdn.net/blueice8601/article/details/7666427 1.linux驱动分类 2.信号量与自旋锁 3.platform总线设备及总线设备如何 ...

  7. HDU 1502 Regular Words DP+高精度

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1502 题目大意:找出总的满足条件的字符串数,num(a)=num(b)=num(c)且任何前缀均满足n ...

  8. 数据分析:Weka,Matlab,R,SPSS,SAS等分析软件的入门

    1 功能角度 weka是机器学习方面的工具(开源).spss是数学工具(商业工具). 具体的说,weka的主要功能是模式分类,或者模式识别或者回归.包括特征的降维(PCA),特征选择,训练模型以及对测 ...

  9. ASP.NET与SOAP协议使用记录

    近期初次接手一个公司的管理系统开发任务,因为公司需要有Android,IOS客户端,又要求有PC端的网页客户端....对服务请求的要求自然也就落在了统一接口访问上了.... 使用ASP.NET的WEB ...

  10. java 深clone和浅clone

    1. clone类 public class Person implements Cloneable, Serializable{ /** * */ private static final long ...