javascript - 空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();
});