Javascript 为什么'；t a DOM2“；点击"；事件工作，当它为“事件”工作时；鼠标悬停；？

我是Javascript新手，尝试使用link元素上的click事件显示/隐藏div。如果我将“鼠标悬停”替换为“单击”，则工作窗格确实会显示为可见，并具有正常的悬停行为。我使用的是FF6.0.2。完整代码可在www.pricelearman.com//uu dev上查看（需要2个下划线）

---

据我所知，链接

未绑定到单击事件处理程序。在屏幕截图中，您可以看到已设置了多个事件，但未设置on click

在中，您正在调用函数showWorkPane（），但在此函数中，您没有为onClick定义任何事件处理程序：

function showWorkPane() {
    var workID = document.getElementById("workID");
    workID.addEventListener("mouseover", showWorkPaneHandler, false);
    // add an event handler for click
}

回答您的问题：当DOM2“单击”事件对“鼠标悬停”有效时，它为什么不起作用呢？

您必须绑定这两个事件（单击和鼠标悬停）。目前我正在研究您的代码，它看起来像是激发

hideWorkPaneHandler（e）

的MouseOut上的eventhandler将与您显示工作窗格的意图相冲突

事件的顺序是这样的

• 用户将鼠标移动到“工作”链接上
• 用户点击“工作”链接，此链接将触发隐藏工作窗格（e）

更新1：当它不工作时的原因

---

在评论中，用户说：“我理解这个问题，将处理程序绑定到mouseover是可行的，但当OP将其更改为click时，它并没有按预期工作。” 你能对此发表评论吗请将非工作版本与click online放在一起，并将其链接到此处，以便我们查看。

无论这种情况如何，如果将所有事件（单击、鼠标移动、鼠标移出）添加到链接，则必须找到一种解决方案，即单击链接不会与将鼠标移离链接（并触发鼠标移出）相冲突

更新2：代码重构 辅助函数，因为跨浏览器的事件不相同（请参见）。如果需要，可以改用jQuery

function getTargetFromEvent(e) {
    // http://www.quirksmode.org/js/events_properties.html#target
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    return targ;
}

我创建了一个函数来包装事件处理程序的添加。您可以像这样调用它

addEventShowPaneHandler（'mouseover'）

以下函数将替换所有的
show---PaneHandler（e）
和
hide---PaneHandler（e）
函数。您所要做的就是在链接中添加相应的窗格id作为数据属性。示例：

function showPaneHandler(e) { // suggestion to rename it to  togglePaneDisplay
    e.preventDefault();
    if (!e) var e = window.event;
    console.log(e.type);
    var element = getTargetFromEvent(e); 
    // see nodeinformation attributes at http://www.quirksmode.org/dom/w3c_core.html 
    var paneId = element.attributes["data-paneId"].value;
    var pane = document.getElementById(paneId);

    if(pane.style.display == "block" || pane.style.display == "undefined")
    {
        pane.style.display = "none";   
    }else{
        pane.style.display = "block";           
    }     
}

因此，对于导航中的每个链接，您可以使用窗格的相应id添加data paneId属性，如下所示：

<nav role="navigation" id="pageNav">
<ul>
   <li><a id="workID" data-paneId="workPane" href="#work">WORK</a></li>  
   <li><a id="aboutID" data-paneId="aboutPane" href="#about">ABOUT</a></li>
   <li><a id="connectID" data-paneId="connectPane" href="#connect">CONNECT</a></li>
</ul>                     








如果您有更多问题或需要进一步帮助，请告诉我。
@和Doutoi它还不到2年。所以这有点奇怪，但也没那么奇怪。如果你在点击一个链接，页面可能会在你看到点击事件处理程序的效果之前跟随这个链接。我理解这个问题的方式是将处理程序绑定到鼠标上方，但当OP将其改为点击时，它没有按预期工作。@threefouronesixonethree@threefouronesixonethree。我已经接受了你的回答。谢谢你周到的回复。但菲利克斯·克林关于如何解释我的问题是正确的。因此，我试图在一篇新的帖子中重新阐述我的问题。希望这不会违反任何堆栈溢出规则。@DouglasLearman AFAIK。为了清楚地表明您对问题做了一些更改，您可以使用
###Update…
添加一个新标题。唯一的想法可能是你是一个新用户。但现在他们可能已经修好了。无论如何，我很高兴你接受了这个问题，我会看看你的新问题。
function showPaneHandler(e) { // suggestion to rename it to  togglePaneDisplay
    e.preventDefault();
    if (!e) var e = window.event;
    console.log(e.type);
    var element = getTargetFromEvent(e); 
    // see nodeinformation attributes at http://www.quirksmode.org/dom/w3c_core.html 
    var paneId = element.attributes["data-paneId"].value;
    var pane = document.getElementById(paneId);

    if(pane.style.display == "block" || pane.style.display == "undefined")
    {
        pane.style.display = "none";   
    }else{
        pane.style.display = "block";           
    }     
}

<nav role="navigation" id="pageNav">
<ul>
   <li><a id="workID" data-paneId="workPane" href="#work">WORK</a></li>  
   <li><a id="aboutID" data-paneId="aboutPane" href="#about">ABOUT</a></li>
   <li><a id="connectID" data-paneId="connectPane" href="#connect">CONNECT</a></li>
</ul>