0

我是 Javascript 新手，并尝试使用链接元素上的点击事件来显示/隐藏 div。如果我将“鼠标悬停”替换为“点击”，那么 workPane 确实会以正常的悬停行为显示。我正在使用 FF 6.0.2。完整代码见 www.pricelearman.com/__dev（需要 2 个下划线） 

function showWorkPane() {
    var _workID = document.getElementById("workID");
    _workID.addEventListener("click", showWorkPaneHandler, false);
}

function showWorkPaneHandler(e) {
    e.preventDefault();
    var _workPane = document.getElementById("workPane");
    _workPane.style.display = "block";
}
4

1 回答 1

0

据我所知，该链接<a id="workID" href="#">WORK</a>未绑定到单击事件处理程序。在屏幕截图中，您可以看到您设置了多个事件，但未设置单击。

没有为链接设置事件监听器 onClick

在您的main.js中，您正在调用函数 showWorkPane() 但在此函数中，您没有为 onClick 定义事件处理程序：

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

解决您的问题：为什么 DOM2“点击”事件不起作用，而它对“鼠标悬停”起作用？

那么你必须绑定两个事件（单击和鼠标悬停）。目前我正在查看您的代码，看起来触发的事件处理程序 onmouseouthideWorkPaneHandler(e)将与您显示工作窗格的意图相冲突。

事件顺序是这样的

  • 用户将鼠标移到链接“工作”上
  • 用户单击链接“工作”<--当前没有事件处理程序，您必须添加它
  • 用户将鼠标移出链接->这会触发hideWorkPane(e)

更新 1：不工作的原因

在评论中，用户Felix King说：“我理解这个问题，将处理程序绑定到鼠标悬停是有效的，但是当 OP 将其更改为单击时，它无法按预期工作。” 请您对此发表评论。请将非工作版本点击在线并在此处链接，以便我们查看。

不管是不是这种情况，如果您将所有事件（单击、鼠标悬停、鼠标悬停）添加到链接，您必须找到一个解决方案，即单击链接不会与将鼠标移离链接（并触发 mouseout）发生冲突.

更新 2：代码重构

一个辅助函数，因为跨浏览器的事件不同（参见quirksmode.org/ on events）。如果你愿意，你可以使用 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');

function addEventShowPaneHandler(eventType){
    document.getElementById("workID").addEventListener(eventType, showPaneHandler, false);
    document.getElementById("aboutID").addEventListener(eventType, showPaneHandler, false);
    document.getElementById("connectID").addEventListener(eventType, showPaneHandler, false);    
}

以下函数替换了您show---PaneHandler(e)和您的所有hide---PaneHandler(e)函数。您所要做的就是在链接中添加相应的窗格 ID 作为数据属性。例子：<li><a id="workID" data-paneId="workPane" href="#work">WORK</a></li>

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";           
    }     
}

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

<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>

如果您有更多问题或需要进一步帮助，请告诉我。

于 2013-07-17T08:08:08.787 回答