CSS pointer-events: none 去掉鼠标事件

pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

 

大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none

pointer-events: none 去掉鼠标事件

pointer-events: auto 恢复鼠标事件

举个简单的例子：

复制代码<a href="http://sf.gg" style="pointer-events: none">click me</a>

这个链接，你是点不了的，并且 hover 也没有效果。（值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的，然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了）

不局限于a链接，其它元素的鼠标事件（例如，div,p等）也可以去除。

 

例如：

<ul class="pager">
            <li id="btn-load-more" class="hidden"><a href="javascript:;">点击载入更多</a></li>
            <li id="btn-loading" class="hidden"><a href="javascript:;"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> 载入中</a></li>
</ul>

$.ajax({
                url: t,
                timeout: 5e3,
                success: function(t) {
                    if (c = !1,
                    $("#btn-loading").addClass("hidden"),
                    !t.data || 0 === t.data.length)
                        return $("#btn-load-more").removeClass("hidden"),
                        $("#btn-load-more").css("pointer-events", "none"),
                        $("#btn-load-more > a").html("没数据了 (〒︿〒)"),
                        void (l = !0);
                    var n = t.data;
                    "feed" === pageType || "channel" === pageType ? (i = t.message[0],
                    0 === a && (a = t.message[1])) : i = t.message,
                    $(".news-list").append(e(n)),
                    $(".tagPopup .tag").tagpopup(),
                    (u += 1) % 3 == 0 && $("#btn-load-more").removeClass("hidden")
                },
                error: function(t, e) {
                    c = !1,
                    $("#btn-loading").addClass("hidden"),
                    l = !0,
                    $("#btn-load-more").removeClass("hidden"),
                    $("#btn-load-more > a").html("请求超时，点击重新载入")
                }
            })

 

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。好吧，还是有点儿悲催～～

 

参考

https://www.qianduan.net/css3-pointer-event-description/

https://blog.csdn.net/qq_42606051/article/details/81808133