pointer-events 鼠标事件控制开关

移动端界面,当前界面点击时,触及a链接的部分会自动跳转,开始测试的时候以为是a链接的误点:

$(function() {
  //处理 滑动超长list的时候 click页面强行停止页面 可能会触发页面上的a链接
  var count = 0,
    timer = null;
  var oldTop = newTop = $(window).scrollTop();

  function log() {
    if (timer) clearTimeout(timer);
    newTop = $(window).scrollTop();
    console.log(++count, oldTop, newTop);
    if (newTop === oldTop) {
      //页面停止做的操作
      $("a").removeAttr("onclick"); 
      clearTimeout(timer);
    } else {
      oldTop = newTop;
      timer = setTimeout(log, 100);
      //页面还在滚动中的操作
      $("a").attr("onclick", "return false"); 
    }
  }
  $(window).on('touchmove', log);
});

判断滚动的页面是否还在滚动中,如果滚动那就将点击元素return false禁止点击,反之放开点击操作。

以上操作之后,发现问题并没有解决,于是用touch进行测试,在touchstart的时候,界面就直接跳转了,具体原因没有找到,推测是界面上调用的外部js影响的a链接的跳转。
于是找到了pointer-events

//禁用鼠标事件,设置pointer-events属性为none:
pointer-events:none
//开启鼠标事件,设置pointer-events为auto:
pointer-events:auto

比如input[type=text|button|radio|checkbox] 支持 disabled 属性,可以实现事件的完全禁用,这个pointer-events就类似于对元素进行禁用。

.pointerEventsNone{pointer-events:none;}
<script type="text/javascript">
  $("body").addClass('pointerEventsNone')
  $(window).on("touchmove", function () {
    $("body").addClass('pointerEventsNone')
  });

  $(window).on("scroll", function () {
    $("body").removeClass("pointerEventsNone")
  });
  $(window).on("touchend", function () {
    $("body").removeClass("pointerEventsNone")
  });
</script>

扩展:pointer-events
https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

推荐阅读更多精彩内容