为什么jQuery(document).on('click...未注册对特定 div 的点击？

Question

单击文档上的任意位置时，我想确保关闭菜单。我在单击文档时正在运行控制台日志，并且在单击特定div 时看不到它填充。

jQuery(document).on('click', function(e){
console.log('- - - - clicking the document - - - -');
});

如果我单击页面上的任意位置，我希望看到此控制台日志。任何帮助都非常感谢。我觉得我在这里好像错过了什么。为什么每当我单击特定div 时控制台日志都不会填充，而是填充其他所有位置。

<div id="info-201972681835185" class="panelInfoBox compareViewInfo" style="bottom: 30px; right: 0px;" previewid="201972681835185" processid="201972681835185">      
<form id="photoInfoForm-201972681835185">
<input name="externalApprovalStateId" id="externalApprovalStateId" value="1000" type="hidden" class="">            
<ul>
<li>
<input type="text" name="name" id="name" title="Label" value="2" class="processEdit title" placeholder="Label">
</li>
</ul>
</form>
</div>

Answer 1

您看不到它发生的div 要么有自己的停止事件传播的单击处理程序，要么位于具有此类单击处理程序的另一个元素中。要使点击达到document，必须允许它传播。

下面是一个示例：

jQuery(document).on('click', function(e){
console.log('- - - - clicking the document - - - -');
});
jQuery(".div2").on("click", function(e) {
e.stopPropagation();
});
jQuery("section").on("click", function() {
// This does both stopPropagation and preventDefault
return false;
});

.div1, .div2, .section1 div {
border: 1px solid black;
margin: 2px;
padding 2px;
}

<div class="div1">
This is div #1, clicks will register
</div>
<div class="div2">
This is div #2, clicks won't register because it has a click handler that stops propagation
</div>
<section class="section1">
<div>
This is div #3, clicks won't register because it's inside an element that has a click handler that stops propagation
</div>
</section>
<div id="info-201972681835185" class="panelInfoBox compareViewInfo" style="bottom: 30px; right: 0px;" previewid="201972681835185" processid="201972681835185">      
<form id="photoInfoForm-201972681835185">
<input name="externalApprovalStateId" id="externalApprovalStateId" value="1000" type="hidden" class="">            
<ul>
<li>
<input type="text" name="name" id="name" title="Label" value="2" class="processEdit title" placeholder="Label">
</li>
</ul>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在评论中，您说：

有趣的是，我看到没有注册点击的div 稍后会通过 js 动态添加。所以我尝试在之后再次运行jQuery(document(单击，但它仍然没有注册。div 只是一个信息面板，通过 js 动态添加，并在单击按钮时滑出。

添加div的时间并不重要，它仍然遵循上面的规则。例如，下面是前面的示例，但在 800 毫秒后添加了div：

jQuery(document).on('click', function(e){
console.log('- - - - clicking the document - - - -');
});
jQuery(".div2").on("click", function(e) {
e.stopPropagation();
});
jQuery("section").on("click", function() {
// This does both stopPropagation and preventDefault
return false;
});
setTimeout(function() {
$(`<div id="info-201972681835185" class="panelInfoBox compareViewInfo" style="bottom: 30px; right: 0px;" previewid="201972681835185" processid="201972681835185">      
<form id="photoInfoForm-201972681835185">
<input name="externalApprovalStateId" id="externalApprovalStateId" value="1000" type="hidden" class="">            
<ul>
<li>
<input type="text" name="name" id="name" title="Label" value="2" class="processEdit title" placeholder="Label">
</li>
</ul>
</form>
</div>`).appendTo(document.body);
}, 800);

.div1, .div2, .section1 div, .div4 {
border: 1px solid black;
margin: 2px;
padding 2px;
}

<div class="div1">
This is div #1, clicks will register
</div>
<div class="div2">
This is div #2, clicks won't register because it has a click handler that stops propagation
</div>
<section class="section1">
<div>
This is div #3, clicks won't register because it's inside an element that has a click handler that stops propagation
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

单击第四个div 仍会触发处理程序。这是委派事件处理的核心方面。