css禁止鼠标事件

时间:2024-04-16 11:19:38

1.需求:最近经常用到dom节点禁用鼠标事件的属性,比如loading状态的时候,比如点击按钮之后禁止再次点击的时候,比如加载更多之后没有数据了的时候,巴拉巴拉。。。

2.问题:但是,经常记不住啊,查了好几次了,这次写下来,认真认识一下pointer-events,目标是不在search

3.正题:

  01.我是html

<button type="button">加载更多</button>

  02.我要被禁用按钮了  

<style>
    .disabled{
        event-pointers:none;
    }
<style/>

  03.禁用

<button type="button" class="disabled">加载更多</button>

4.认识一下常用属性,mdn来了,这里只写通用元素的,如果需要更多的属性值来支持svg元素,那么,点击一下就可以移步mdn了。

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

  auto:跟不写这个属性是一样一样的;

5.恩,来个总结

  禁用:pointer-events:none;

  撤销禁用:pointer-events:auto;