css禁止鼠标事件


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;

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM