手机扫码看效果
不多说,直接上代码
<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
---恢复内容结束---