jquery长按操作时的兼容性问题解决

    前段时间需要做个长按可删除的操作,用来适配移动端的,偷懒从网上找了个方法,做完后感觉还挺好用,但是测试的时候出问题了,在部分机型上不起作用,于是乎,找了个测试机,各种断点各种试,终于发现了问题所在。

    从代码里可以看到,我们在触发事件的时候,写了三个状态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("长按事件触发"); }

  

猜你喜欢

转载自www.cnblogs.com/xlin021/p/11871892.html
今日推荐