我在一个 div 上有一个切换事件,我已经看到很多关于我的问题,但似乎没有什么能解决我正在尝试做的事情,它要么让我的 div 在几秒钟内消失,要么就是没有工作。这是我的 jsfiddle .
我有一个 div 需要在另一个 <div>
时切换被点击。切换的 div 中有需要填写的输入,以及其中的提交按钮。所以我需要允许在 div 内部单击,但只能在我的 div 内部单击。所以我希望 div 显示,除非用户单击此 div 之外。
我正在使用这个可以很好切换的查询:
$('#MyDiv').click(function (event) {
$("#ToggledDiv").slideToggle();
});
然后这个代码在 div 之外单击时隐藏它不起作用:
$(window).click(function () {
$("ToggledDiv").hide();
});
我已经尝试过使用 e.preventDefault() 的解决方案;但这不起作用,或者 $(document).click,甚至 mousedown 但它不会按照我想要的方式流动,它会在几秒钟内隐藏它,或者它会阻止切换甚至工作所以我'我迷路了。
最佳答案
此行为背后的原因是 Event Bubbling and Capturing HTML DOM API。
你可以使用event.stopPropagation()或 event.cancelBubble = true
以防止事件冒泡到 DOM 树,从而防止任何父处理程序收到事件通知。
另一篇好文章:events order
$('#MyDiv').click(function(event) {
$("#ToggledDiv").show();
disabledEventPropagation(event);
//console.log('2nd event');
});
$('#ToggledDiv').click(function(event) {
disabledEventPropagation(event);
//console.log('3rd event');
});
$(document).click(function() {
$("#ToggledDiv").hide();
//console.log('1st event');
});
function disabledEventPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyDiv" style="background-color:yellow">
click me to open
</div>
<div id="ToggledDiv" style="display: none;background-color:yellow">
<input type="text" />
<input type="submit" />
</div>
关于javascript - Jquery toggle div,允许点击div外部关闭,也允许点击div内部的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43591454/