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

曾经终败给现在 2022-08-22 15:24 261阅读 0赞

## 如何让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][http_blog.csdn.net_zhangxin09_article_details_8677975]

小结
    
    touch事件的触发，在Android和IOS系统下，是有区别的，比如本文中出现的在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][https_www.zhihu.com_question_20702822_answer_15992377] 来源：知乎  
> 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[http_blog.csdn.net_zhangxin09_article_details_8677975]: http://blog.csdn.net/zhangxin09/article/details/8677975
[https_www.zhihu.com_question_20702822_answer_15992377]: https://www.zhihu.com/question/20702822/answer/15992377