如何让touchmove之后不触发touchend的事件 - 博客频道 - CSDN.NET
分类：javascript安卓
如何让touchmove之后不触发touchend的事件
class="m-action-container"&
class="u-btn-focus" href="javascript:;" ontouchend="window.setTimeout(function(){twindowrackMail()},0);"&当前快件追踪&
以前的项目上有很多这样的代码，直接用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；
绑定touchend事件，绑定函数的逻辑改成，如果moved为false，就执行原来函数(在这之前要获取到原来touchen属性的函数)；如果moved为true，将moved设置为初始值false；
需要用到：
1. $(“[ontouchend]”).each();
$(this).bind();
foo.bind(this, argument);
$(this).removeAttr();
jquery ready()的几种实现方法：①$(document).ready(){
}); ②$(function(){ })；还有几种不列举了
安卓上的问题
但是~在搜索过程中发现一个问题，但这个问题我自己并没有遇到；
问题是这样的，使用 touch* 事件时，在 Android 4.0 上面的浏览器手指在 a 元素（或者其他任何元素）上做滑动操作，然后手指离开，结果不会触发 touchend 事件。同样的操作在 Android 2.x / iOS 却会会正常触发 touchend 事件。到 touchmove 事件之后就终止掉，简单说，就是 touchend 事件丢失。天呐~无疑这是一个非常严重的bug——因为这是一个极其基础的事件，不可或缺！~My God~
touch事件的触发，在Android和IOS系统下，是有区别的，比如本文中出现的在touchend在Android下，有时并不会被触发的情况，在IOS下，应该是都可以触发的，所以，当希望使用touch事件时，请多多注意。
本文只是一个测试，也算是是一个我对touch事件的一点点简单的认识，如有描述错误或者理解错误的地方，恳请指教，非常感谢！
PS：发现自己还是不能一段一段的写东西，因为总是记不住之前原本的思想，和想要写的内容。本篇内容，写到最后，就感觉有些乱了，而且感觉也没有写出什么实质的内容。
本文地址:http://www./?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 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来模拟点击，也不会有延迟，
作者：佑界 链接： 来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
排名：千里之外
（8）（12）（4）（5）（3）（1）（2）（0）（1）（5）（2）（1）（35）（1）（11）（29）（8）（9）（1）（1）966,690 七月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
移动Web之触摸和指针事件详解
移动Web之触摸和指针事件详解
Peter-Paul Koch
注意:，500+CTO技聚重新定义技术领导力！
Author Contacted
相关厂商内容
相关赞助商
QCon全球软件开发大会上海站，日-22日，上海宝华万豪酒店，！
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?如何解决这个关于touchmove与touchstart事件问题_百度知道
如何解决这个关于touchmove与touchstart事件问题
，单击事件将被发送到该页面的新版本;).extend({ _&#47. 余由以下方法;&#47，点击时不会,var touchStartLocation，事件的照顾;), function(){if (. 考虑一个事实.DocumentTouch && document instanceof DocumentT2;&#47.flag.preventDefault();if(touchstart click&#39;do your stuff here})，你不想混了默认的触摸和非触摸（点击）API.handled = true，即点击将始终遵循一个触摸事件的优势。然而，如果“会连续”;touchstart click&#39, function(){ //touchstart mousedown&#39.preventDefault()。 10;. 一般来说;14。 它的工作 12;&#47。 易Peasy ，每100毫秒左右。通过禁用touchstart,});$thing.type == &quot。 ..preventDefault();touchStartTime = d. 我写了一个jQuery插件, function(e){e.match(/var touchEndT#myButton&quot.; Person dragged their finger}}8;touchstart&#39;}}););touchstart click&#39; 100ms && distance &if (count %2 == 0) { &#47. 通常这个工程!flag) {flag = true.on(&#39.stopPropagation()：var count = 0;/if (duration &lt，客厅点击（）来获取触发;&#47, funcion() {var d = new Date();touchstart click&#39;$._on( Person tapped their finger (do click/click&#39，您可以BINB生活;gi, function (event) {if (;return wasC要求touchstart事件停止传播, fn):&#47。$(&#39;touchend&#39!== true) {&#47.bind(&#39;already&) {$(this)： 我换成jQuery的on功能与修改一个; Person pressed their finger (not a quick tap)}if (duration &4.extend({on.，单击（）;/以避免不希望的副作用};但touchstart时可用;;setTimeout(function(){ flag =click&#47.bind(&#39;touchEndLocation=：$(&#39;already&quot.myBtn&#39;doTouchLogic().getTime();touchstart click&#39;;= 100ms && distance &gt.bind(&#39; });)) {$(this)。$(document);用法比将有确切像以前一样;click&#39。 最后。点击是没有抓到任何其他的点击为100ms. */, data。试试在你自己的:&#39：$(&#39;}).location(x.location(x。 15。 13, 100);最敏感的点击桌面&#47.bind(&#buttonId&#39.data(&quot.flag = true,y), 100)，你一个计数器; })() }).ontouchstart.on(&#39.;touchEndTime= d, &#39，就足以“（无需touchstart）.on.$(this);tap stuff here)}if (duration & },isAlreadyClicked.data(&，但做一个标志。$;clickO6;touchstart&#39;/}}.}}9;return function(&#47，请参阅 注意, myClickHandler);)，你可以听;);touchend mouseup&#39;;}）.isAlreadyClicked()) {;* ;从jQuery的. 另一个更好的维护.bind(&#39; 10px) {&#47, function(event){if ($(this);click touchstart&quot,= 10px) {&#47. }.handled ,y).flag = false：D 11：var clickEventType=((document，您可以添加在doTouchLogic功能更多的项目来检测手势和诸如此类的东西;}/string&#39.fn.stopPropagation()。（“touchstart”功能（E）{e: (function(){ return $，这样的函数只触发一次; in window || window.on(&#39：你不能处理好鬼click事件每个基础;$ do something}return false})，并知道它的工作适合你;$thing. 你可以尝试这样的!clickO 10px) {&#47，会做你想要它;function doTouchLogic() {var distance = touchEndLocation - touchStartLocation。需要的任何种类的任何延误, funcion() {var d = new Date()。 如果你在的TouchMove事件连接和跟踪的位置;#my-button&#39;);ontouchstart&#39，这里是我做的，该技术也将做event.fn.. 检查快速按键和点击CHOST从谷歌 7; Do your magicreturn this.replace(/}());#mylink&quot.getTime(), false);;your code here}): function () {var wasClicked = clickObject. 我也工作在Android &#47，这里就是我的最快//);或&#39。var flag =});$(&var duration = touchEndTime - touchStartTime，每当ontouchstart上一个标志一组并随后删除（忽略）事件触发。延迟的点击是通过屏幕位置发射;5; && isTouchSupported && , Person flicked their finger}if (duration &基本上. 只为目的; do something}return false});&#47.;3。var touchStartTime.data(&quot. 这是我“创造”;} else if ( function(event){ TAP解决方案;touchstart click&#39. 相反;gi))) types = types。下面是伪代码.bind(clickEventType，所以如果你的触摸事件修改页面的方式，它看来;);= 10px) {&#47，以及;count 2% gives the remaining counts when devided by 2&#47, true);touchStartLocation =/, function(){count++;setTimeout(function () { clickObject.stopPropagation（）. 它可以有效地分配给该事件&#39。它的实际工作还没有被touchstart超载, iPad的Web应用程序，只要浏览器支持触摸事件，并拿出GhostClick和FastClick修复;$thing1;touchstart&quot, &#39, one ) {if (typeof types == &#39;var touchEndL} else {return false: (function(){var isTouchSupported = &#39。大多数解决方案要么打破滚动或不办理鬼单击事件正常;already&quot.bind(&#39; 100ms && distance &touchstart&#39. 有很多事情试图解决这一问题时要考虑的，全部换成我的点击事件与)，我能想到的做;;.a旦你进入触摸的世界更容易只与触摸相关的功能处理。var clickObject = {touch/$(&#buttonId&#39。 对于一个完整的解决方案，它提供了一个“touchclick”事件;your code here}).stopPropagation（）。这需要避免被解雇两次都支持双方的点击和touchstart事件时?&#39!(types. 结合两者;= 100ms && distance &lt，无需或全局标志摆脱“鬼点击”的.on(&#39, function(){e!==null)
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}