移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。
2016-12-12 18:48
399 查看
/*仅适用于内容中点击元素。对于拖动等元素,需要自行在页面处理。
* 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素。
* 如果手指移动距离小于10像素,则还是认为用户在做点击操作。如果移动距离超过了10像素,则取消后续事件监听函数的执行。*/
* 主要是绑定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>
相关文章推荐
- 解决移动端页面滚动后不触发touchend事件
- 滚动到页面底部触发分页事件
- 【转】js在页面滚动到一定位置时触发事件?
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- 通过touch事件手写实现页面在移动端的触屏滚动功能
- [Js]判断iframe内的页面是否滚动到底部触发事件
- 如何让touchmove之后不触发touchend的事件
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
- 移动端滑动页面不触发点击事件
- 移动端开发踩坑日记——安卓4.4.2不触发touchend事件
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
- 解决移动端页面滚动后不触发touchend事件
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- js在页面滚动到一定位置时触发事件?
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 页面关闭时触发事件 - yiki - 博客园
- 由页面脚本改变一个组件值所触发的事件
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 网页 的DOCTYPE HTML public 会导致 页面的部分事件不触发