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

手机扫码看效果

不多说，直接上代码

<ul id="Ul"><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li><li>666</li><li>777</li><li>888</li><li>999</li><li>000</li><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li><li>fff</li><li>ggg</li><li>hhh</li><li>iii</li><li>jjj</li><li>kkk</li><li>lll</li><li>mmm</li><li>nnn</li><li>ooo</li><li>ppp</li><li>qqq</li>
</ul>

*{margin: 0;padding: 0;border: 0;
}
ul{list-style: none;
}
li{line-height: 2em;border-bottom: 1px solid #eee;width: 100%;text-indent: 2em;
}

var UL = document.getElementById('Ul');
var moves = true;
function Alert(ev){if(moves)alert(ev.target.innerHTML)
}
UL.addEventListener('touchmove',function(){moves = false;UL.addEventListener('touchend',function(){moves = true;})
})
UL.addEventListener('touchend', Alert)

原理：

1. 设置一个变量moved来标识是否有移动过，初始值为false；

2. 绑定touchend事件，将moved置为true；

3. 绑定touchmove事件，将moved置为false；

4. 在touchmove事件函数中继续绑定touchend事件，再将moved置为true

---恢复内容结束---

转载于:https://www.cnblogs.com/guojikun/p/6389545.html

如何让touchmove之后不触发touchend的事件相关推荐

移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
javaScript-touch事件详解(touchstart、touchmove和touchend)-滑动事件案例
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
移动端页面滚动后不触发touchend事件
在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件. 但是,touchend事件在页面滚动时有个问题.在滚动 ...
一个按钮触发两个事件可以吗？
问: 我想让一个按钮触发两个事件,submit1_click 和submit2_click()可以吗?怎么设?先执行submit1_click,再接着执行submit2_click.是再OnClick ...
visual studio 2013 触发挂起事件
在 VS2013 中调试 winddows phone 或者 win rt 程序的时候,需要手动触发 "挂起" 事件. 如果找不到这个按钮: 1.打开菜单栏中的 "自定义 ...
jeecg3.8popup弹出窗口触发失去焦点事件，引发验证弹窗，影响体验问题的解决办法
jeecg3.8popup弹出窗口触发失去焦点事件,引发验证弹窗,影响体验问题的解决办法参考文章: (1)jeecg3.8popup弹出窗口触发失去焦点事件,引发验证弹窗,影响体验问题的解决办法 ( ...
js手动触发这个 onchange 事件
input type=txt 这个组件触发change事件,需要同时满足两个条件: 获得焦点: 值发生改变: 注:select这类组件只要值改变即可触发change事件: 下面介绍一个实际例子:在一个 ...
js 触发 select onchange事件
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件, 例如,在页面加载 ...
Winform3、事件触发机制学习:事件的注册和定义和参数含义
Winform3.事件触发机制学习:事件的注册和定义在一个Form窗体中拖个按钮,双击后系统自动生成代码: // 定义事件,一般在Form.cs文件 // 默认事件是有命名规范的,控件命_事件名_个 ...

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

如何让touchmove之后不触发touchend的事件相关推荐

最新文章

热门文章