<div> 使用border-radius的透明区域不会触发mouseleave？

Question

我在显示为半圆形的 div 上有一个 mouseleave 事件侦听器。当我移出圆圈时鼠标离开不会触发，但指针仍在 div 的透明矩形区域内。

我使用的 div 包含 SVG 元素，所以我不想使用 <circle> 或 <svg> 路径解决方案。我不是在寻找解决方法（因为我已经有了），只是想特别想知道 <div> 元素。

有没有办法让鼠标离开可见区域时触发？

半圆div css：

#circleDiv{
  display: block;  
  position: absolute;
  height: 300px; 
  width: 150px; /*half the height*/
  border-radius: 150px 0 0 150px; /* half the height e.g. x 0 0 x  */
  background-color: lavender;
}

更新：想通了。 div 有一个透明的子 svg 组件。它超出了父 div 的可见区域的范围。只要鼠标在 div 的其中一个子元素内，即使子元素的边界超出父元素，也不会触发 leave。我知道进入子组件不会触发 mouseleave，但我不知道即使超出父级边界它们也会阻止 mouseleave。

通过将 div 的第一个子元素 svg pointer-events:none 以及之后的所有 svg 子组件设置为 pointer-events:visiblePainted 来解决此问题

Answer 1

您可以使用SVG 来拥有真实圈子：

 <svg width="200px" height="200px">
    <circle id="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 </svg>

然后，就是普通的 JavaScript / jQuery：

 $('#circle').mouseleave(function() {
    alert("LEFT");
 });

看看这个JSFiddle，我已经创建了。

对于半圆，您可以使用 SVG 的 path 元素：

Another JSFiddle

Answer 2

我很确定这就是您正在寻找的解决方案。我花了一些时间来解决这个问题，但它最终使用纯 javascript 工作：

document.querySelector('#circleDiv').addEventListener('mouseout', function(event) {
    if (this) {
        window.alert("LEFT");
    }
}, false);

如果您追求简单，使用 jQuery 是最简单的方法。为了真正了解这里发生的事情，您必须了解 DOM 和 BOM 以及事件在其中传播或流动的方式。首先，我选择文档节点并使用 .querySelector 因为您尝试返回第一个结果，因为它是一个 id css 选择器（每个文档应该只有一个具有给定值的 id 选择器）。如果您希望选择多个元素，您可以定义一个类并将 .querySelectorAll 与给定的 CSS 类选择器一起使用。

接下来，您要在此处调用 mouseout 方法，因为它与大多数浏览器兼容，而 mouseleave 跨浏览器的兼容性有限。尽管调用 mouseout 方法会从影响祖先元素的子节点冒泡，但它不会影响此特定示例的结果。声明此方法后，浏览器需要指示（通过定义函数）一旦此事件发生后该做什么。

我将条件设置为在“this”选择器 (#circleDiv) 上发生。在事件通过冒泡 DOM 树完成传播后，我调用浏览器窗口以使用指定的字符串提醒用户。我希望这是有道理的。