捕获带有iframe子div的鼠标下移事件

Question

我正在尝试捕获包含iframe的div的鼠标按下事件。有什么办法吗?看起来iframe正在捕获事件，并且没有为div触发mousedown事件。

jQuery(".test").on("mousedown", ()=> console.log("Test"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="/" >Test</a>
</div>
<div class="test">
<iframe src="https://www.google.com/" ></iframe>
</div>

Answer 1

据我所知，你将能够通过javascript(和css)与框架内容交互的唯一方法是，如果域的范围是相同的。Example-Demo

现在任何跨域交互都需要一个cors配置来允许不同域之间的交互。

出于这个原因，我认为，你想要实现的是不可能的了(除非你是在两个领域的控制)。

Answer 2

我设法找到了一个解决方案，不是最好的，但它适用于我

jQuery(window).on('blur', function() {
if (document.activeElement === document.querySelector('iframe')) {
console.log('clicked on iframe')
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<iframe id="testiframe" src="https://www.google.com/" ></iframe>
</div>

Answer 3

由于您使用的是jQuery，您可以使用contents()方法，所以:

jQuery(".test").contents().on("mousedown", ()=> console.log("Test"))

然而，拦截别人的页面点击可能有点粗略!!你拿着咔哒声干什么?