pointer-events 鼠标事件控制开关
2021-02-03 本文已影响0人
蝴蝶结199007
移动端界面,当前界面点击时,触及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