禁用元素点击事件(兼容IE8+)

9 篇文章 1 订阅

实现思路:chrome、firefox下利用CSS3属性pointer-events: none;元素永远不会成为鼠标事件的target。

考虑到需兼容IE8+,利用js绑定点击事件,函数内直接return false,阻止其他事件进行。

js代码:

// 禁用点击事件
    function notClick(ele) {
        $(ele).addClass('notClick').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        });
    }

    // 取消禁用点击事件
    function runClick(ele) {
        $(ele).removeClass('notClick').off('click');
    }

css代码:

.notClick {
    pointer-events: none;
    cursor: default;
}

使用时,调用notClick函数,并将需绑定元素作为参数传入。需要取消禁用点击事件,调用runClick函数。

补充:

pointer-events取值为none时:

元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

解释:未完待续。。。。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值