前段时间需要做个长按可删除的操作,用来适配移动端的,偷懒从网上找了个方法,做完后感觉还挺好用,但是测试的时候出问题了,在部分机型上不起作用,于是乎,找了个测试机,各种断点各种试,终于发现了问题所在。
从代码里可以看到,我们在触发事件的时候,写了三个状态touchstart、touchmove、touchend。
其中touchstart中以计时器的方法添加了长按操作,touchend中可执行其他非长按操作,touchmove中直接清除了计时器,想了一下,应该是防止手滑动的问题吧
但是呢,部分手机啊,就是太太太太太太灵敏了,你觉得你手没动,但它觉得你动了,所以就贴心的清除掉了,so~你还咋触发长按?
这个时候,我们只要把touchmove中的操作删掉就好了,嗯....为了让大家看得明白些,我给注释了,以下放代码
<div id="wrapper"> 存放需要操作的内容 </div>
var timeOutEvent = 0; $(function () { $("#wrapper").on({ touchstart: function (e) { var e = e || window.event; timeOutEvent = setTimeout("longPress()", 500);//500设置时间
e.preventDefault(); }, // 触摸移动时清除计时器 touchmove: function () {
// 此处是引起兼容性问题的地方,删除或者注掉就好了
// clearTimeout(timeOutEvent); // timeOutEvent = 0; }, // 触摸结束清除计时器 touchend: function (e) {var e = e || window.event; var target = e.target || e.srcElement;
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) { console.log('其他操作'); } return false; } }) }); // 长按操作 function longPress() { timeOutEvent = 0; console.log("长按事件触发"); }