如果此元素上发生 onmouseout 事件，是否可以检查元素父级的 onmouseout 事件？

Question

让我解释一下这个场景：我有一个JSP，其中包含一个表，其源代码对我不可用。在表的<TD>标签中，但是我可以使用Java代码动态插入锚标签：

String html =
 "<a href="javascript:showReleaseVersionsPopUp('" + currentRow.getComponentSeq() + "'); " class="windowletIcon">" +
                "<img src="./images/information-button.png" width='25' height='20' id='img_"+currentRow.getComponentSeq()+"' " +
                        />" +
 "</a>";
return html;

现在我想要的是，如果鼠标输入这个锚标签，它会转到 Javascript showReleaseVersionsPopUp()并显示一个隐藏的 DIV，但是在这个锚标签上的 mouseout 事件中，我不希望它转到 Javascript hideReleaseVersionsPopUp()并隐藏 DIV。我宁愿希望 Javascript hideReleaseVersionsPopUp()应该在这个锚标签的父<TD>标签上的鼠标退出事件上调用。

我相信首先要做到这一点，我需要在 Anchor 标签上设置一个 mouseout 事件处理程序并阻止事件冒泡，然后在它的父 <TD> 标签上设置事件处理程序。

但是，在这里重申一下，我无法访问 JSP 代码和<TABLE>代码，所以我所能做的就是通过上面提到的 Java 代码。

任何建议表示赞赏。

Answer 1

可以将事件处理程序附加到父节点的 onmouseout 事件。

var el = document.getElementById('idOfAnchor').parentNode;
if (el.addEventListener) {
  el.addEventListener('mouseout', hideReleaseVersionsPopUp ); 
} else if (el.attachEvent)  { // for IE8 and previous versions
  el.attachEvent('mouseout', hideReleaseVersionsPopUp );
}

Answer 2

您可以使用

myElement.parentNode来获取myElement的父元素。然后，您可以对该父元素执行所需的任何操作。DOM 操作，事件侦听器，应有尽有。

因此，不要在定位点上添加mouseout事件侦听器，而是在定位点的父级上添加。