當DOM2“單擊”事件可用於“鼠標懸停”時，為什么它不起作用？

Question

我是Java語言的新手，並嘗試使用link元素上的click事件顯示/隱藏div。 如果我將“ mouseover”替換為“ click”，則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";
}

Answer 1

據我所知，鏈接<a id="workID" href="#">WORK</a>未綁定到click事件處理程序。 在屏幕快照中，您可以看到已經設置了多個事件，但是未設置單擊。

在main.js中，您正在調用函數showWorkPane（），但在此函數中，您沒有為onClick定義事件處理程序：

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

要解決您的問題： 當DOM2“單擊”事件可用於“鼠標懸停”時，為什么它不起作用？

那么，您必須綁定兩個事件（單擊和鼠標懸停）。 目前，我正在研究您的代碼，並且似乎觸發hideWorkPaneHandler(e)的事件處理程序onmouseout將與您顯示workPane的意圖發生沖突。

事件的順序是這個

• 用戶將鼠標移到“工作”鏈接上
• 用戶單擊鏈接“工作” <-當前沒有事件處理程序，您必須添加它
• 用戶將鼠標移出鏈接->這會觸發hideWorkPane(e)

更新1：無法運作的原因

用戶費利克斯·金（Felix King）在評論中說：“我理解該問題的方式是將處理程序綁定到鼠標懸停起作用，但是當OP將其更改為單擊時，它無法按預期工作。” 你能對此發表評論嗎？ 請在線點擊非工作版本，然后在此處鏈接它，以便我們進行查看。

無論是否將所有事件（單擊，鼠標懸停，鼠標移出）添加到鏈接中，都必須找到一種解決方案，即單擊鏈接不會與將鼠標移離鏈接（並觸發鼠標移出）產生沖突。

更新2：重構代碼

輔助功能，因為事件在整個瀏覽器中都不相同（請參閱quirksmode.org/關於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>                     

如果您還有其他問題或需要進一步的幫助，請告訴我。