Question

我在div上有一个切换事件，我看到很多关于我的问题，但似乎没有任何东西可以用于我正在尝试做的事情，它要么让我的div在几秒钟内消失，要么就是没有不行。这是我的jsfiddle。

我有一个div，当点击另一个<div>时需要切换。切换的div中包含需要填写的输入，以及其中的提交按钮。所以我需要允许div中的点击，但只能在我的div中。所以除非用户点击这个div之外，否则我希望显示div。

我正在使用此查询切换正常：

$('#MyDiv').click(function (event) {
  $("#ToggledDiv").slideToggle();
});

然后这个编码在div外部点击时隐藏它不起作用：

$(window).click(function () {
  $("ToggledDiv").hide();
});

我尝试过使用e.preventDefault（）的解决方案;但这不起作用，或者$（文件）.click，甚至是mousedown，但它只是不按我想要的方式流动，它会在几秒钟内隐藏它，或者它会阻止切换甚至工作所以我'迷路了。

Answer 1

在event内点击时，请查看#targetDiv。您可以使用两个属性来评估要执行的操作：event.target和event.currentTarget。在这种情况下：

$('#ToggledDiv').on('click', function(event) {
    console.log(event.target, event.currentTarget);
});

这是查看点击内容是实际目标还是目标中的子元素的好方法。

Answer 2

要添加到Chris的回答，您可以在此处看到我使用vanilla Node.contains检查e.target是否不在表单内，也不是按钮...

https://jsfiddle.net/jmLdp45s/3/

var $button = $('button');
var $form = $('form');

$button.click(function() {
  $form.slideToggle();
});

$(window).click(function(event) {
  if (
    !$form.get(0).contains( event.target ) // target is not inside form
    && event.target !== $button.get(0) // target is not button
  ) $form.hide();
});

Answer 3

此行为背后的原因是HTML DOM API的Event Bubbling and Capturing。

您可以使用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>

Jquery切换div，允许单击div外部关闭，也允许div内的所有内容都可单击

3 个答案: