禁用元素点击事件（兼容IE8+）_禁用点击事件-CSDN博客

本文链接：https://blog.csdn.net/lihaofeifei/article/details/82760592

实现思路：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属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。

解释：未完待续。。。。