javascript-除某些元素外的onclick； e.target無法正常運作...有時

Question

我試圖重新創建jQuery的本機event處理程序.click("body", "element, element", function( ... )); 。 如果用戶單擊除這兩個元素以外的任何內容，它將執行某些操作。

我已經成功完成了此操作，但是有時腳本無法正常工作 。 稍后，如果用戶單擊body ，則實際的下拉按鈕觸發，它將不會切換下拉菜單的class 。 我不確定為什么會這樣，因為它不時在起作用...

---

這是我的JavaScript ：

var uButton = document.getElementById("user_content"), // the trigger
    uDropdown = document.getElementById("user__dropdown-menu"); // the menu

document.onclick = function(e){
    if(e.target == uButton){ // if button has been clicked
        toggleClass(uDropdown, "active"); // (custom function) toggle the class "active"
    } else if(e.target != uButton && e.target != uDropdown){ // if anything BUT the dropdown and button are clicked
        if(hasClass(uDropdown, "active")){ // (custom function) if the dropdown is active
            uDropdown.className = "user__procedural-outer-dropdown"; // reset the classes to default
        }
    }
}

和相應的HTML ：

<div class="navigation__user-content" id="user_content"> <!-- the button !-->
    <span id="nav_username">Sign In</span>
    <div class="user__procedural-outer"></div>
</div>
<div class="user__procedural-outer-dropdown" id="user__dropdown-menu"></div> <!-- dropdown !-->

---

我附帶了一個JsFiddle ，因此您可以嘗試重新創建我的問題。

非常感謝所有幫助，
謝謝。

Answer 1

看來這里有幾個問題。 我將類名重命名為更簡單的單詞並測試了代碼。 我發現，基於您的CSS以及您設置為position：relative和position：absolute的內容，下拉菜單div必須位於user _...- outer div內！

我將代碼修改如下並對其進行測試。 它可以正常工作：

 var uButton = document.getElementById("user_content"), uDropdown = document.getElementById("user-dropdown"); document.onclick = function (e) { if (e.target == uButton || e.target.parentNode == uButton) { toggleClass(uDropdown, "active"); } else if (e.target != uButton && e.target != uDropdown) { if (hasClass(uDropdown, "active")) { uDropdown.className = "user-dropdown"; } } } function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function toggleClass(element, cls) { element.classList.toggle(cls); } 

 .user-content{ width: 70px; height: 15px; margin-top: 6px; padding: 8px; float: right; background: #730aa2; border-radius: 2px; cursor: pointer; } .user-content:hover{ box-shadow: inset 2px 2px 0 #200050; } .user-content > #signin{ display: inline-block; position: relative; top: -2px; left: 3px; font-size: 13px; font-weight: bold; color: #e6e6e6; } .user-content:hover > #signin{ text-shadow: 1px 1px 3px #caca30; } .user-outer{ float: right; position: relative; top: -2px; width: 17px; height: 17px; border-radius: 16px; background: yellow no-repeat center; background-size: cover; } .user-dropdown{ position: absolute; top: 43px; right: 0; width: 320px; height: 200px; /*background:#f8f8f8;*/ /* to see its position*/ visibility: hidden; /* hide when not active */ overflow: hidden; } .user-dropdown.active{ background: red; visibility:visible; } 

 <p>This is a test page!</p> <div id="user_content" class="user-content"> <span id="signin">Sign In</span> <div id="user-outer" class="user-outer"> <div id="user-dropdown" class="user-dropdown"></div> </div> </div> 

編輯：在點擊事件中使用if (e.target == uButton || e.target.parentNode == uButton)將按鈕內的所有元素都包括在內以顯示下拉菜單。

Answer 2

由於您的nav_username不在user__procedural-outer ，因此在document.onclick = function(e)發生時，也需要將其定位

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function toggleClass(element, cls){
    element.classList.toggle(cls);
}

var uButton = document.getElementById("user_content"),
    uButtonSpan = document.getElementById("nav_username"),
    /*since your "nav_username" is not in the "user__procedural-outer", you need to target it also when "document.onclick = function(e)" happens */
    uDropdown = document.getElementById("user__dropdown-menu");

document.onclick = function(e){
    if((e.target == uButton) || (e.target == uButtonSpan)){
        toggleClass(uDropdown, "active");
    } else if((e.target != uDropdown) && (e.target != uButtonSpan) && (hasClass(uDropdown, "active"))){
            uDropdown.className = "user__procedural-outer-dropdown";
    }
}

Answer 3

我盡可能少地修改了您的代碼。 我希望這是您要尋找的。

 function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function toggleClass(element, cls){ element.classList.toggle(cls); } var uButton = document.getElementById("user_content"), // the trigger uDropdown = document.getElementById("user__dropdown-menu"); // the menu document.onclick = function(e){ var elem = e.target; do { switch(elem) { case uButton: return toggleClass(uDropdown, "active"); case uDropdown: return void(0); } } while(elem = elem.parentNode); if(hasClass(uDropdown, "active")) uDropdown.className = "user__procedural-outer-dropdown"; } 

 .navigation__user-content{ width: 70px; height: 15px; margin-top: 6px; padding: 8px; float: right; background: #730aa2; border-radius: 2px; cursor: pointer; } .navigation__user-content:hover{ box-shadow: inset 2px 2px 0px #5a0d91; } .navigation__user-content:hover #nav_username{ text-shadow: 2px 2px 0px #5a0d91; } .navigation__user-content > #nav_username{ display: inline-block; position: relative; top: -2px; left: 3px; font-size: 13px; font-weight: bold; color: #e6e6e6; } .user__procedural-outer{ float: right; position: relative; top: -2px; width: 17px; height: 17px; border-radius: 16px; background: url("noimagefound.png") no-repeat center; background-size: cover; } .user__procedural-outer-dropdown{ position: absolute; top: 43px; right: 0; width: 320px; height: 200px; overflow: hidden; } .user__procedural-outer-dropdown.active{ background: red; } 

 <div class="navigation__user-content" id="user_content"> <span id="nav_username">Sign In</span> <div class="user__procedural-outer"></div> </div> <div class="user__procedural-outer-dropdown" id="user__dropdown-menu"></div>