透明区域 <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的一个子节点内，即使子节点超出父节点，也不会触发。 我知道进入一个子组件不会触发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元素：

另一个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树完成传播之后，我调用浏览器窗口以使用指定的字符串警告用户。 我希望这是有道理的。