如何让touchmove之后不触发touchend的事件

原创 2016年06月01日 14:38:17

如何让touchmove之后不触发touchend的事件

<div class="m-action-container">
                            <a class="u-btn-focus" href="javascript:;" ontouchend="window.setTimeout(function(){twindowrackMail()},0);">当前快件追踪</a>
 </div>

以前的项目上有很多这样的代码,直接用HTML的事件处理,这种绑定方式有几个缺陷:
1、时差问题:用户在touchend按钮的时候,js还未被加载;
2.HTML和js代码紧密耦合;
3.touchemove之后,touchend时间仍会被触发;我们希望move之后就不触发end;

因为这样上类似的代码太多,不能一个一个改;

$(function() {
        $("[ontouchend]").each(function(index, element) {
            var moved = false;
            var bindFn = function(touchEndFn) {
                    if (!moved) {
                        eval(touchEndFn);
                    }
                    moved = false;
                }
            $(this).bind("touchend", bindFn.bind(this, $(this).attr("ontouchend")));
            $(this).bind("touchmove", function() {
                moved = true;
                console.log("moving");
            });
             $(this).removeAttr("ontouchend");
        });

})

思路:
1. 先找到所有具有[ontouchedend]属性的节点;设置一个变量moved来标识是否有移动过,初始值为false;
2. 绑定touchmove事件,将moved置为true;
3. 绑定touchend事件,绑定函数的逻辑改成,如果moved为false,就执行原来函数(在这之前要获取到原来touchen属性的函数);如果moved为true,将moved设置为初始值false;

需要用到:
1. $(“[ontouchend]”).each();
2. $(this).bind();
3. foo.bind(this, argument);
4. $(this).removeAttr();
5. jquery ready()的几种实现方法:①$(document).ready(){
}); ②$(function(){ });还有几种不列举了


安卓上的问题

但是~在搜索过程中发现一个问题,但这个问题我自己并没有遇到;

问题是这样的,使用 touch* 事件时,在 Android 4.0 上面的浏览器手指在 a 元素(或者其他任何元素)上做滑动操作,然后手指离开,结果不会触发 touchend 事件。同样的操作在 Android 2.x / iOS 却会会正常触发 touchend 事件。到 touchmove 事件之后就终止掉,简单说,就是 touchend 事件丢失。天呐~无疑这是一个非常严重的bug——因为这是一个极其基础的事件,不可或缺!~My God~
http://blog.csdn.net/zhangxin09/article/details/8677975

小结

touch事件的触发,在AndroidIOS系统下,是有区别的,比如本文中出现的在touchend在Android下,有时并不会被触发的情况,在IOS下,应该是都可以触发的,所以,当希望使用touch事件时,请多多注意。
本文只是一个测试,也算是是一个我对touch事件的一点点简单的认识,如有描述错误或者理解错误的地方,恳请指教,非常感谢!
PS:发现自己还是不能一段一段的写东西,因为总是记不住之前原本的思想,和想要写的内容。本篇内容,写到最后,就感觉有些乱了,而且感觉也没有写出什么实质的内容。
本文地址:http://www.zhangyunling.com/?p=230
touchcancel

Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):

 - An event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.
- The touch point has left the document window and moved into the browser's UI area, a plug-in, or other external content.
- The user has placed more touch points on the screen than can be supported, in which case the earliest Touch in the TouchList gets canceled.

能否用click替代touch

在手持设备的浏览器上(本处主要指代iOS和Android系统上的webkit内核的浏览器和嵌入在应用程序里面的webview),由于两次连续“轻触”是“放大”的操作(即使你两次轻触的是一个链接或一个有click事件监听器的元素),所以在第一次被“轻触”后,浏览器需要先等一段时间,看看有没有所谓的“连续的第二次轻触”。如果有,则进行“放大”操作。没有,才敢放心地认为用户不是要放大,而是需要“click”至此才敢触发click事件,导致“短按(手指接触屏幕到离开屏幕的时间比较短)”的click事件通常约会延迟300ms左右。

zepto已经封装了上述tap:zepto/src/touch.js at master 路 madrobby/zepto 路 GitHub
另外(由下面的@张辰 同学的回答,)还可以直接使用Fastclick:ftlabs/fastclick · GitHub来模拟点击,也不会有延迟,

作者:佑界 链接:https://www.zhihu.com/question/20702822/answer/15992377 来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。但是,touchend事件在页面滚动时有个问题。在滚动完...
  • yhb241
  • yhb241
  • 2015-08-12 16:53
  • 5098

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

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。但是,touchend事件在页面滚动时有个问题。在滚动完...

移动web相关touch事件触发(touchstart/touchmove/touchend)

上周做了一个项目,发现一个DOM元素触发touch事件,竟然还会触发别的元素的click事件。 我先描述一下,当时遇到的问题。项目初始状态是下面这张图: 我给右上方的的搜索按钮,绑...

移动端touchmove事件边界touchend不触发

做前端一年整,碰到不少问题,以前都是找资源,解决问题,不会去分享资源,这次是我第一次写博客,如果有什么问题,欢迎来交流。 在过去一年的时间里,我所接触的多有是移动端的项目,移动前端中,touch触...

【HTML5】触摸事件(touchstart、touchmove和touchend)

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefaul...

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。   touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefa...

html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove

前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设...

移动互联网终端的touch事件,touchstart, touchend, touchmove

诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互。随着移动网络的发展,其能够支持越来越...

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主...

移动互联网终端的touch事件,touchstart, touchend, touchmove

前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)