移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。
/*仅适用于内容中点击元素。对于拖动等元素,需要自行在页面处理。
* 主要是绑定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 事件。的更多相关文章
- uni-app中使用scroll-view滚到底部时多次触发scrolltolower事件
一.前言.scroll-view基本属性: 前言: 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- jQuery 双击事件(dblclick)时,不触发单击事件(click)
我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...
- C#中要使ListBox使用AddRange()时,能够触发SelectedValueChanged事件
1. 要触发 SelectedValueChanged事件,必须要当ListBox所选中的值发生改变 基本思路是: 当AddRange()后,就马上指定ListBox的SelectedIndex,这样 ...
- [转]jQuery 双击事件(dblclick)时,不触发单击事件(click)
例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...
- 移动端 iphone touchmove滑到边界(浏览器地址拦及以上) touchend失效解决办法
在移动端h5页面:尤其那些全屏幕的盒展示切换页面,当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域):此时,手指已经离开屏幕了,但是ios上无法监听到touchend 事件:touchen ...
- 盒子上下滚动到js 底部触发的事件
//html是用法举列子,js亲测有效(把这段js#scro加到你要滚动的盒子) <div id="scro"> <div>1</div> & ...
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
随机推荐
- bzoj3166
首先不难想到穷举次大数然后我们只要找到满足这个数是次大数的最大区间即可显然答案只可能是这两种[LL[i]+1,R[i]-1]和[L[i]+1,RR[i]-1]L[i]表示这个数ai左侧第一个比它大的数 ...
- 队爷的讲学计划 CH Round #59 - OrzCC杯NOIP模拟赛day1
题目:http://ch.ezoj.tk/contest/CH%20Round%20%2359%20-%20OrzCC杯NOIP模拟赛day1/队爷的讲学计划 题解:刚开始理解题意理解了好半天,然后发 ...
- 让DataGridView的标题显示中文
一般情况,DataTable中用来区分不同列的值,使用DataTable.Columns.ColumnsName,但是DataTable的Columns还有一个Caption属性,在这个属性里面可以用 ...
- suse linux编译安装GCC报错
gcc编译安装过程 1.先安装三个库 gmp mprc mpc 这三个库的源码要到官网去下载 1)安装gmp:首先建立源码同级目录 gmp-build,输入命令,第一次编译不通过,发现缺少一个叫m4的 ...
- DD-WRT相关资源
版本网站下载:Other Downloads,进入betas->2014 FTP下载:如ftp://ftp.dd-wrt.com/betas/2014/06-23-2014-r24461/ Re ...
- 使用Sql按日期条件查询
--查询当天(1: select * from ShopOrder where datediff(day,ordTime,getdate()-1)=0 --查询当天(2:select * from i ...
- [Java] Java IO 概况
Java IO 是 Java 的一套 API, 用于读入和写出数据(输入和输出).Java IO API 位于 java.io package.实际上 java.io package 没有解决所有的输 ...
- poj 3169 Layout
Layout Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8610 Accepted: 4147 Descriptio ...
- Cookie 和Session
会话: 简单理解: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话要解决的问题: 每个用户与服务器进行交互的过程中,各自会有一些数据,程序 ...
- java第四周学习
这一周学习的还是面向对象的方法和应用 Java中方法的使用和注意事项 如果没有返回值,就不允许通过return关键字返回结果 方法中不允许嵌套使用 Return返回值只允许返回一个值,不允许返回多个 ...