Question

实际上，我想在iframe的某些部分中禁用指针事件。因此，我的想法是将div放在顶部的iframe上，然后禁用该div的指针事件。

这是我的代码。

<html>

<body>
  <div class="holder">
    <div class="bar"> </div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/_VNad" frameborder="0" allowfullscreen>  </iframe>
  </div>
  <style>
    .holder {
      width: 1000px;
      height: 1000px;
      position: relative;
    }
    
    .frame {
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    .bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background-color: green;
      pointer-events: none;
      z-index: 1;
    }
  </style>
</body>

</html>

但是它没有禁用iframe上的指针事件。请建议我如何实现此目标？？？预先感谢。

Answer 1

我认为您的pointer-events用法向后。如果您在元素上设置了pointer-events: none，则浏览器会将事件传递到该元素后面的下一个元素。

除了指示该元素不是指针事件的目标外，该值none指示指针事件“通过”该元素并以该元素“下”为目标。 — MDN Documentation

相反，您应该只保留pointer-events属性，而“ spaceball”元素将成为click事件的目标，以防止其到达iframe。

如何在iframe的某些部分中禁用点击指针事件？

1 个答案: