首页 > 代码库 > 如何让touchmove之后不触发touchend的事件
如何让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
---恢复内容结束---
如何让touchmove之后不触发touchend的事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。