Question

我有三个div如下：

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

js在空div类上点击事件

1 个答案: