在边框半径之外的点击在Chrome浏览器中的表现与在火狐浏览器中的表现不同。

Question

假设我们在一个div.parent里面有一个div.child圆圈。

$('div').on('click', function(e){
  console.log(e.target); 
});

div.child:hover {
      border: 1px solid red !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class='parent'>
<div class="child" style="height: 10vw; width: 10vw; padding: 1%; text-center; border: 1px solid black; overflow: hidden; border-radius: 50%;">
Lots of content! Until it overflows! Lots of content! Until it overflows!
</div>
</div>

在firefox中，如果你点击圆圈外的任何地方，你的点击将针对父圈。

然而，在chrome中，如果你在圆圈外的边框内点击，你仍然会以子圆圈为目标。

我的问题是：在chrome中，有没有一种简单的方法来检测光标在圆圈外？ 用CSS吗？ JS？

最好，答案是一些简单的东西，可以很容易地应用于所有圆角框。

谢谢！请问有什么方法可以检测到圆圈外的光标？

Answer 1

我看不出这里有什么问题。你可以给div添加边框，使用chromeFirefox工具栏来识别焦点、悬停等情况。附上一张截图

让我知道这是否有意义。

Answer 2

对于这样的东西，我建议使用Konva.js。

这里是我使用Konva.js做的一个项目的代码链接，它能够检测到它的点击位置（在这种情况下，在墙上的2D画框的钉子上输出测量结果），并输出结果，无论是否使用chrome，firefox等。同样的功能也可以很容易地在悬停时实现。

代码：/github https:/github.comJsonTylerframedblobmasterassetsjsscript.js。 (从第313行开始，看工具提示的定位逻辑)

实时演示。https:/framed.jsonbytes.com。

现场演示的解释。基本上你一进入页面就把滚动器调整到一定的高度和宽度。然后按 "创建"。然后选择一个背景。最后选择一个框架大小，看到它出现在画布上。把鼠标悬停在框架上就可以看到框架的大小。并在将钉子拖动到画布上你想要的位置后点击钉子，就可以得到它与画布左、右、底、顶的实际测量值。

Konvas.js文档。https:/konvajs.orgdocsindex.html