javascript onmouseout 也适用于鼠标悬停

Question

我正在尝试显示/隐藏按钮中的一些 文本。按钮是

<button id="SOS" onmouseover="show()" onmouseout="hide();">
    <p>S.O.S</p>
    <div id="sos_left"> <?=$text_to_show_hide?></div>
</button>

javascript代码是

<script type="text/javascript">
function show()
    {
        sos_left=document.getElementById('sos_left');
         alert("mouseover");
         sos_left.style.color = "red";
         sos_left.style.fontSize = "28";

    }
function hide(){

       sos_left=document.getElementById('sos_left');
       alert("mouseout");
       sos_left.style.color = "blue";
       sos_left.style.fontSize = "0";
}
</script>

问题是，即使我将鼠标悬停在上方，鼠标移出也会发出警报。

注意:我不能使用 jquery，因为该站点是基于 vbulletin 的，并且我在其中一个模板上使用了这段代码。

Answer 1

问题是 mouseover和 mouseout事件冒泡，这意味着当您的光标进入和退出按钮的后代元素时，按钮上定义的事件监听器也会被触发。

您可以做的是检查生成事件的元素是否实际上是 <button>元素。像这样修复 DOM:

<button id="SOS" onmouseover="show(event)" onmouseout="hide(event);">...

然后是你的JS代码:

function show(e) {
    if ((e.target || e.srcElement).id !== "SOS") return;
    ...

function hide(e) {
    var tgt = e.target || e.srcElement;
    if (tgt.id !== "SOS") return;
    // If the cursor enter in one of the descendants, mouseout is fired, but
    // we don't want to handle this
    if (tgt.contains) {
        if (tgt.contains(e.relatedTarget || e.toElement)) return;
    } else if (this.compareDocumentPosition)
        if (tgt.compareDocumentPosition(e.relatedTarget)
                & Node.DOCUMENT_POSITION_CONTAINS) return;
    ...

在 Internet Explorer 中(现在也在 Opera 中)有这些事件 mouseenter和 mouseleave行为非常相似，但不要冒泡。对于其他浏览器，它们是在 jQuery 等通用框架中模拟的。

最后一点，我建议您使用一些比传统方法更现代的方法来附加您的事件监听器。另外，您定义 sos_left 的方式意味着它成为一个全局变量。使用关键字 var在定义之前。