Question

我有一个鼠标悬停事件，它会在我鼠标悬停的div顶部创建一个工具提示div。

但如果鼠标位于工具提示上方，则会将鼠标触发。我希望它忽略新创建的div，因此除非我将鼠标移出原始div，否则它不会触发mouseout。所以我使用了e.stopPropagation()，但它似乎没有解决问题。

这是我的代码：

function ToolTip(e,el,data)
{
    e.stopPropagation(); //ignore other elements that overlap

    var div  = createDiv();     
        div.style.left = el.offsetLeft + 10 + 'px';
        div.style.top = el.offsetTop + 10 + 'px';
        div.className = 'ToolTip';
        div.innerHTML = 'This is a tooltip!';
        document.body.appendChild(div); 

        function removeToolTip()
        {
            el.removeEventListener('mouseout',removeToolTip,false);
            removeDiv(div); 
        }

    el.addEventListener('mouseout',removeToolTip,false);    
}

div.addEventListener("mouseenter",function(e){ToolTip(e,this,data);},false);

我误解了e.stopPropagation()的用途吗？

我已经制作了一个jsfiddle脚本： http://jsfiddle.net/Lc7t7/

Answer 1

据我了解，您正在尝试阻止工具提示与光标交互，因为当它执行时，不与工具提示所用的元素交互。您需要做的是使工具提示对光标“不可见”。停止传播没有帮助，因为工具提示的父元素不是工具提示元素，它是<body>元素。

令人惊讶的是，答案不是JavaScript，而是CSS。 CSS pointer-events property设置为none时，会使元素不与光标交互。 JavaScript应该尊重这一点，并忽略你用工具提示“掏出”元素的事实。遗憾的是，在许多浏览器的旧版本中，浏览器支持为lacking，因此请牢记这一点。

e.StopPropagation（）忽略重叠元素

1 个答案: