Chỉ dừng một nút tắt khi đóng khi nhấp vào

Question

Tôi có một nút thả xuống (chỉ một, không phải tất cả), và bên trong nó, tôi muốn có một số trường đầu vào để mọi người có thể nhập nội dung mà không cần ẩn ngay khi bạn nhấp vào nó (nhưng nó đóng lại nếu bạn nhấp vào bên ngoài của nó).

Tôi tạo ra một jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

Và đây là đoạn code, nó là cơ bản:

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

Vì vậy, về cơ bản, tôi muốn nó không đóng trên bấm vào menu thả xuống (nhưng gần trên click nút hành động hoặc bên ngoài trình đơn thả xuống). Đoán tốt nhất của tôi cho đến nay là thêm một lớp vào nó và cố gắng làm một số JS, nhưng tôi không thể hiểu được.

Cảm ơn bạn đã được trợ giúp.

Answer 1

Vấn đề là plugin jQuery thả xuống sẽ đóng menu thả xuống khi bạn nhấp vào bất kỳ nơi nào khác. Bạn có thể tắt hành vi đó bằng cách nắm bắt các sự kiện nhấp chuột trên phần tử menu thả xuống của bạn và giữ cho nó không tiếp cận được trình xử lý sự kiện nhấp chuột trên phần tử nội dung.

Chỉ cần thêm

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

jsfiddle thể được tìm thấy here

Answer 2

Tôi biết câu hỏi này không phải dành cho góc cho mỗi gia nhập, nhưng đối với bất cứ ai sử dụng góc bạn có thể vượt qua sự kiện từ HTML và dừng công tác tuyên truyền qua $ event:

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

Answer 3

Sau khi thử nhiều kỹ thuật tôi thấy rằng cách tốt nhất để sử dụng, không gây ra những hạn chế đơn giản:

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

Điều này cho phép bạn thực hiện một số ràng buộc trực tiếp cho các yếu tố bên trong trình đơn thả xuống.

Answer 4

cũng có, ngăn chặn nhấp trừ khi nhấp chuột một yếu tố nút

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

Answer 5

Trên thực tế, nếu bạn đang ở Angular.js, nó sẽ là tao nhã hơn để thực hiện một chỉ thị cho nó:

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

Và sau đó, trên trình đơn thả xuống, thêm chỉ thị:

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

Đặc biệt nếu bạn muốn ngừng truyền cho nhân e chuột sự kiện:

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

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

Answer 6

Một giải pháp nhanh chóng, chỉ cần thêm onclick thuộc tính để div có class dropdown-menu:

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

Answer 7

Tôi có vấn đề này nhưng trong một phản ứng thành phần - các phản ứng thành phần là trong một thả xuống bootstrap menu với một biểu mẫu. Mỗi lần một phần tử bên trong trình đơn thả xuống được nhấp vào nó sẽ đóng lại, gây ra các vấn đề khi nhập bất kỳ thứ gì trong biểu mẫu.

Thông thường e.preventDefault() và e.stopPropagation() sẽ không hoạt động trong ứng dụng phản ứng do sự kiện jquery được kích hoạt ngay lập tức và phản ứng cố gắng can thiệp sau này.

Mã dưới đây cho phép tôi khắc phục sự cố của mình.

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

hoặc ở định dạng ES6

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

Hy vọng điều này có thể được sử dụng cho bất cứ ai đang gặp khó khăn với câu trả lời khác khi cố gắng sử dụng nó trong phản ứng.