停止從關閉點擊一個下拉開關點擊

我有一個按鈕下拉（只有一個，而不是所有的人），並在裏面，我想有幾個輸入字段，人們可以在裏面輸入的東西沒有下拉隱藏作爲一旦你點擊它（但它會關閉，如果你點擊它）。停止從關閉點擊一個下拉開關點擊

我創建了一個的jsfiddle：http://jsfiddle.net/denislexic/8afrw/2/

這裏是代碼，這是基本的：

<div class="btn-group" style="margin-left:20px;"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
    Action 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
    <!-- dropdown menu links --> 
     <li>Email<input type="text" place-holder="Type here" /></li> 
     <li>Password<input type="text" place-holder="Type here" /></li> 
    </ul> 
</div>

所以基本上，我希望它不是關閉在下拉菜單中點擊（但接近上的點擊操作按鈕或下拉菜單之外）。到目前爲止，我的最佳猜測是添加一個類並嘗試做一些JS，但我無法弄清楚。

感謝您的任何幫助。

來源

2012-07-23 denislexic

110

問題是，當你點擊其他任何地方時，boostrap下拉式jQuery插件關閉了drop-menu。您可以通過捕獲下拉菜單元素上的點擊事件並阻止其到達body元素上的點擊事件偵聽器來禁用該行爲。

只需添加

$('.dropdown-menu').click(function(event){ 
    event.stopPropagation(); 
});

的jsfiddle可以發現here

來源

2012-07-23 17:41:12 CraigTeegarden

令人驚訝的是，我稍微調整了一下，因爲我只需要一些下拉菜單不要做正常的行爲，通過向它添加一個類並在代碼中檢查它......如果感興趣，請參閱小提琴。 http://jsfiddle.net/denislexic/8afrw/8/ – denislexic 2012-07-24 11:04:58

你也可以只阻止點擊某個特定的課程，所以你不用擔心正常的下拉菜單。 [js fiddle here]（http://jsfiddle.net/8afrw/9/） – CraigTeegarden 2012-07-24 15:08:14

哈，是的，這很容易，謝謝。 – denislexic 2012-07-24 15:28:57

我知道這個問題是不是對角本身，而是使用角的人，你可以從HTML傳遞事件，並停止傳播通過$事件：

<div ng-click="$event.stopPropagation();"> 
    <span>Content example</span> 
</div>

來源

2014-02-07 18:38:04 parliament

議會，很好的回答！我不知道你怎麼能趕上菜單外的點擊... – Urigo 2014-09-05 12:06:31

你是一個救生員。萬分感謝。 – sfendell 2014-11-10 21:10:00

不客氣:) – parliament 2014-11-11 01:38:40

嘗試了很多方法後，我發現，最好的使用，導致沒有缺點，這些缺點是即使是簡單的：

$(document) 
.on('click', '.dropdown-menu', function (e){ 
    e.stopPropagation(); 
});

它可以讓你也做一些活裏的下拉列表內的元素結合。

來源

2014-10-23 13:57:35

對我來說最好的解決方案 – 2017-06-03 17:43:15

也，防止點擊除非點擊一個按鈕元素

$('.dropdown-menu').click(function(e) { 
    if (e.target.nodeName !== 'BUTTON') e.stopPropagation(); 
});

來源

2014-12-12 00:30:42

其實，如果你在Angular.js，這將是更優雅，使一個指令吧：

app.directive('stopClickPropagation', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
      element.click(function(e) { 
       e.stopPropagation(); 
      }); 
     } 
    }; 
});

而且然後，在下拉菜單中，添加指令：

<div class="dropdown-menu" stop-click-propagation> 
    my dropdown content... 
<div>

特別是如果您想要停止多路傳播è鼠標事件：

... 
element.click(function(e) { 
    e.stopPropagation(); 
}); 

element.mousedown(... 
element.mouseup(... 
...

來源

2015-11-23 21:25:31 Nahn

另一種快速的解決方案，只需添加onclick屬性的div有dropdown-menu類：

<div class="dropdown-menu" onClick="event.stopPropagation();">...</div>

來源

2016-06-13 06:54:59

我有這個問題，但在反應組件 - 反應成分是在引導下拉帶有表單的菜單。每次單擊下拉菜單中的某個元素時，該元素都會關閉，從而導致在表單中輸入任何內容。

通常的e.preventDefault()和e.stopPropagation()將無法在反應應用程序中工作，因爲jquery事件被立即觸發，並在此之後嘗試干預。

下面的代碼允許我解決我的問題。

stopPropagation: function(e){ 
    e.nativeEvent.stopImmediatePropagation(); 
}

或ES6格式

stopPropagation(e){ 
    e.nativeEvent.stopImmediatePropagation(); 
}

希望這可以利用任何人試圖在使用它反應過來的時候與其他的答案中掙扎。

來源

2017-11-08 10:57:24 Sprose

停止從關閉點擊一個下拉開關點擊

回答

相關問題