在Jquery中點擊傳播失敗

Question

對於我正在使用的網站的部分內容，我有一組可以跳出的側邊欄。爲了在用戶完成隱藏時隱藏它們，我設置了一個帶有點擊事件的div（請參見下文），以便每當用戶單擊側欄外的某個位置時，側欄就會關閉。然而，我遇到的問題是，click事件處理程序正在抓取事件，運行其方法，然後click事件似乎停止。我嘗試過使用返回true和我在這裏和互聯網上發現的其他一些東西，但點擊事件似乎死了。

$('.clickaway').click(function() { 
     $('body').removeClass(drawerClasses.join(' ')); 
     return true; 
    }); 

編輯：這是一個例子的小提琴：https://jsfiddle.net/2g7zehtn/1/ 我們的目標是讓抽屜後仍能夠按一下按鈕，改變文本的顏色。

Answer 1

問題是你.clickaway層上面坐着一切的interactive，如您button。所以點擊按鈕，你實際上是點擊圖層。

你可以做的一件事是在.clickaway圖層上面爲要與之交互的元素應用更高的堆疊順序。例如，如果我們運用position: relative，像這樣：

.show-drawerHotkey .ColorButton { 
    position: relative; 
} 

的元素現在是在一個較高堆疊順序的（因爲它涉及的clickaway後，我們已經沒有應用z-index到clickaway）

這是一個小提琴演示：https://jsfiddle.net/2g7zehtn/5/

Answer 2

使用this somewhat famous SO answer作爲指導，可以綁定到$(document).mouseup();事件並確定是否一定的「切換」的條件適用：

[編輯] - 實施例更新，以示出單擊內含div以外的鏈接。

// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it 
 

 
var m = $('#menu'); 
 
var c = $('#menuContainer'); 
 
var i = $('#menuIcon'); 
 

 
i.click(function() { 
 
    m.toggle("slow"); 
 
}); 
 

 
$(document).mouseup(function(e) { 
 

 
    console.log(e.target); // <-- see what the target is... 
 

 
    if (!c.is(e.target) && c.has(e.target).length === 0) { 
 
    m.hide("slow"); 
 
    } 
 
    
 
});

#menuIcon { 
 
    height: 15px; 
 
    width: 15px; 
 
    background-color: steelblue; 
 
    cursor: pointer; 
 
} 
 
#menuContainer { 
 
    height: 600px; 
 
    width: 250px; 
 
} 
 
#menu { 
 
    display: none; 
 
    height: 600px; 
 
    width: 250px; 
 
    border: dashed 2px teal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" id="link">I'm a link outside of the container</a> 
 

 
<div id="menuContainer"> 
 
    <div id="menuIcon"></div> 
 
    <div id="menu"></div> 
 
</div>