通过绝对定位的元素传递鼠标事件

6 回答

• 7

  pointer-events: none;
  

  是一个CSS属性，它使事件“通过”应用它的元素，并使事件发生在“下面”的元素上 .

  详情请见：https://developer.mozilla.org/en/css/pointer-events

  IE 11不支持它;所有其他供应商都支持它很长一段时间（全球支持在12年/ 16年约为92％）：http://caniuse.com/#feat=pointer-events（感谢@ s4y提供评论中的链接） .

  回复于 2024-04-28T02:06:13+08:00
• 3

  有一个javascript版本可以手动将事件从一个div重定向到另一个div .

  我把它清理干净，然后把它变成了一个jQuery插件 .

  这是Github存储库：https://github.com/BaronVonSmeaton/jquery.forwardevents

  不幸的是，我使用它的目的 - 在Google Map 上覆盖蒙版并没有捕获点击和拖动事件，并且鼠标光标没有改变，这降低了用户体验，我只是决定在IE和Opera下隐藏掩码 - 两个不支持指针事件的浏览器 .

  回复于 2024-04-28T02:06:13+08:00
• 31

  如果您知道需要鼠标事件的元素，并且您的叠加层是透明的，则可以将它们的z-index设置为高于叠加层的值 . 当然，所有事件都应该适用于所有浏览器 .

  回复于 2024-04-28T02:06:13+08:00
• 45

  如果您需要的只是mousedown，您可以通过以下方式使用document.elementFromPoint方法：

  • 删除mousedown上的顶层，

  • 将 x 和 y 坐标从事件传递给 document.elementFromPoint 方法以获取下面的元素，然后

  • 恢复顶层 .

  回复于 2024-04-28T02:06:13+08:00
• 1

  您没有收到事件的原因是因为绝对定位的元素不是您想要“点击”（蓝色div）的元素的子元素 . 我能想到的最干净的方法是将绝对元素作为你想要点击的那个的孩子，但我假设你做不到，或者你不会在这里发布这个问题:)

  另一种选择是为绝对元素注册一个单击事件处理程序，并调用蓝色div的单击处理程序，使它们都闪烁 .

  由于事件通过DOM冒出来的方式，我不确定是否有更简单的答案，但我很好奇是否有其他人有任何我不知道的技巧！

  回复于 2024-04-28T02:06:13+08:00
• 406

  也很高兴知道......
  可以为父元素（可能是透明div）禁用指针事件，并为子元素启用指针事件 . 如果您使用多个重叠的div图层，您希望能够单击任何图层的子元素，这将非常有用 . 为此，所有育儿div获得 pointer-events: none 并且click-children获得由 pointer-events: all 重新启用的指针事件

  .parent {
      pointer-events:none;        
  }
  .child {
      pointer-events:all;
  }
  
  <div class="some-container">
     <ul class="layer-0 parent">
       <li class="click-me child"></li>
       <li class="click-me child"></li>
     </ul>
  
     <ul class="layer-1 parent">
       <li class="click-me-also child"></li>
       <li class="click-me-also child"></li>
     </ul>
  </div>
  

  回复于 2024-04-28T02:06:13+08:00