div不响应鼠标事件

我不是女神ヾ 2022-12-02 03:51 461阅读 0赞

div不响应鼠标事件

有时，需要覆盖在表面的div完全透明，并且，鼠标事件也不相应。如何实现呢，其实很简单
只需要加使用css一句话即可实现：
只需要添加style样式 pointer-events: none 即可不相应任何鼠标事件
使用pointer-events:none 后，子元素的div内容将会继承该特性，此时，可以在子元素中使用pointer-events:all 恢复事件响应

  1. <script> function hello(e) { console.log(e) } </script>
  2. <div id="parent-div" style="width: 800px; height:600px">
  3.     <div id="main-div" style="width:100%; height: 100%; pointer-events: none" onClick="hello('aaa')">
  4.         <div id="sub1-div" onClick="hello('hello-1')">Hello 1</div>
  5.         <div id="sub2-div" style="pointer-events: all;" onClick="hello('hello-2')">Hello 2</div>
  6.     </div>
  7. </div>

如上代码， 点击sub-div时，就不会触发任何事件，但是点击sub2-div时，可以触发hello('hello-2')

发表评论

表情：
评论列表 （有 0 条评论，461人围观）

还没有评论，来说两句吧...

相关阅读

    相关 div不响应鼠标事件

    div不响应鼠标事件 有时，需要覆盖在表面的div完全透明，并且，鼠标事件也不相应。如何实现呢，其实很简单 只需要加使用`css`一句话即可实现： 只需要添加st

    我不是女神ヾ我不是女神ヾ/ 0 赞/ 462 阅读