空div类上的js单击事件

Question

我有如下三个 div：

这是JSFiddle。

$(document).on('click', '.top', function (e) {					
  console.log("Empty space clicked");	
});		

.top{    
    width: 208px;
    text-transform: uppercase;
    text-align: left;
    height: 34px;
    background-color: #F44336;
    border-bottom: 1px solid #ea1c0d;
    color: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.1);
    padding: 3px 8px;
    cursor: auto;
  }
 .inner_1{
    font-size: 12px;
 }
  .inner_2{
   font-size: 11px;
    text-transform: none;
    line-height: 12px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
 }
 
 .inner_1:hover,  .inner_2:hover {
    cursor: pointer;
        text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="top">
  <div class="inner_1">Top content: This is full width</div>
  <div class="inner_2">Bottom</div>
</div>

从jsfiddle可以看出，当.top被点击时，它会显示一个日志。

但是，我想让它仅在单击空白空间时显示日志，而不是在单击 inner_1 或 inner_2 div 类时显示日志（因为它在单击这两个类时显示日志为现在）。

实现这一目标的最佳方法是什么？

谢谢。

Answer 1

使用 jquery 的 stopPropagation。这将阻止所有子 div 触发父 onClick

$(document).on('click', '.top > div', function (e) {                    
  e.stopPropagation();
});     

编辑： 上面的代码建立在 OP 知道的基础上，但这种方式对浏览器来说更有效。

$('.top > div').on('click', function (e) {                    
  e.stopPropagation();
});