jQuery e.stopPropagation() - 如何在不破坏Dropbox功能的情况下使用? [英] jQuery e.stopPropagation() - how to use without breaking dropbox functionality altogether?
问题描述
短篇小说: stopPropagation()会阻止下拉菜单关闭 - 这很好。但它也阻止了Dropbox下次打开 - 这很糟糕。
Short story: stopPropagation() prevents a dropdown menu from closing - which is good. But it also prevents the dropbox from opening next time around - which is bad.
长篇故事:
我正在使用Twitter -Bootstrap我在下拉菜单中放了一个搜索框,如下所示:
Long story: I'm using Twitter-Bootstrap and I've put a search box inside the dropdown menu like so:
<div id="search_word_menu" style="position:absolute;right:157px;top:60px;">
<ul class="nav nav-pills">
<li class="dropdown" id="menu200">
<a class="dropdown-toggle btn-inverse" data-toggle="dropdown" style="width:117px;position:relative;left:2px" href="#menu200">
<i class="icon-th-list icon-white"></i>
Testing
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Retweets</a></li>
<li><a href="#">Favourites</a></li>
<li class="divider"></li>
<li><a href="#">A list</a></li>
<li class="divider"></li>
<li><a href="#">A saved search</a></li>
<li><a href="#">A saved #hashtag</a></li>
<li class="divider"></li>
<li>
<!-- HERE --> <input id="drop_search" type="text" class="search_box_in_menu" value="Search...">
</li>
</ul>
</li>
</ul>
当我点击搜索框内部时,默认行为显然是关闭下拉列表 - 但这使得在搜索词中写入相当困难。所以我尝试了e.stopPropagation(),这确实阻止了下拉关闭。然后,当我在搜索框中按Enter键时,我正在使用.toggle()关闭下拉列表 - 似乎工作正常。
When I click inside the searchbox, the default behaviour is obviously to close the dropdown - but that makes it rather hard to write in a search term. So I've tried with the e.stopPropagation(), which does indeed prevent the dropdown from closing. Then, when I press enter in the searchbox, I'm closing the dropdown with a .toggle() - also seems to work fine.
当我想要再次使用时,问题出现了,因为e.stopPropagation()现在已经完全禁用了下拉列表 - 即。当我按下拉菜单时,它不再打开!这是因为stopPropagation(),毫无疑问 - 但是我如何解决这个问题,以便我得到上述功能,但不完全打破其余部分?
The PROBLEM arises when I want to to it all again, because the e.stopPropagation() has now disabled the dropdown alltogether - ie. when I press the dropdown menu, it doesn't open anymore! This is because of stopPropagation(), no doubt - but how can I resolve this, so that I get the aforementioned functionality, but without breaking the rest altogether?
jQuery下面:
$(document).ready(function() {
console.log("document.ready - ");
//clearing search box on click
$(".search_box_in_menu").click(function(e) {
e.stopPropagation(); // works for the specific task
console.log(".search_box_in_menu - click.");
if($(this).val() == 'Search...') {
$(this).val('');
console.log(".search_box_in_menu - value removed.");
};
//return false; //this is e.preventDefault() and e.stopPropagation()
});
// when pressing enter key in search box
$('.search_box_in_menu').keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if(keycode == '13') {
console.log(".search_box_in_menu - enter-key pressed.");
console.log($(this).val());
$(this).closest('.dropdown-menu').toggle(); //works
}
});
$('.dropdown').click(function() {
console.log(".dropdown - click.");
$(this).closest('.dropdown-toggle').toggle(); //does nothing
});
非常感谢一些帮助!我开始怀疑这可能只是一个引导问题,或者至少是由它们的实现引起的 - 但它超出了我的压力。
Would greatly appreciate some help! I'm starting to suspect this might be a bootstrapped-only problem, or at least caused by their implementation - but it's beyond me atm.
推荐答案
找到解决方案:使用 stopPropagation()
,并使用手动触发器关闭框。然后,出于某种原因(是 stopPropagation()
重置?),它可以正常工作。
Found a solution: Using stopPropagation()
, and closing box with manual trigger. Then, for some reason (is the stopPropagation()
reset?), it works.
//dealing with the dropdown box
$(document).ready(function() {
console.log("document.ready - ");
//clearing search box on click and prevent the dropdown from closing
$(".search_box_in_menu").click(function(e) {
e.stopPropagation();
console.log(".search_box_in_menu - click.");
if($(this).val() == 'Search...') {
$(this).val('');
console.log(".search_box_in_menu - value removed.");
};
//return false;
});
// when pressing enter key in search box
$('.search_box_in_menu').keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if(keycode == '13') {
console.log(".search_box_in_menu - enter-key pressed.");
console.log($(this).val());
$(this).closest('.dropdown').trigger('click');
}
});
//resetting a dirty search box
$('.dropdown').click(function() {
if ($(this).closest('.search_box_in_menu').val() == 'Search...') {
console.log(".search_box_in_menu - clean searchbox.");
}
console.log(".dropdown - click.");
});
});
这篇关于jQuery e.stopPropagation() - 如何在不破坏Dropbox功能的情况下使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!