如何防止输入控件允许事件冒泡？ [复制]

Question

在我的 html 中，我有需要响应用户点击的 div。我有一个新要求，即在该 div 中添加一些输入控件，但是单击它们会导致 div 的 click 事件被触发。

是否可以在不干扰输入功能的情况下防止这种情况发生？

$('.click-me').click(function(){
   $(this).css("background-color", "#F00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="click-me">
    I can be clicked
    
    <select>
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </select>
</div>

这与建议的副本不同，因为我没有将事件附加到选择列表，浏览器会自行完成。我想允许选择列表上的正常事件播放，但不调用它后面的 div 上的事件

Answer 1

选项 1：事件目标过滤

您可以在没有太多额外代码的情况下做到这一点，也不会阻止事件冒泡，这可能会在以后产生意想不到的影响，或者实际上是通过添加任何额外的事件绑定来实现。..

只需建立事件的原始目标，然后仅在不是输入等时运行相关代码：

$('.click-me').click(function(e) {
  if (['select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) === -1) {
    $(this).css("background-color", "#F00");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="click-me">
  I can be clicked

  <select>
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
  </select>
</div>

选项 1：事件目标匹配

或者，检查事件目标是否是实际的div 本身，下面检查事件目标是否具有类click-me，最好在更独特的属性上进行比较（例如id，如其他地方所述) 或者你可以匹配实际的节点本身。

$('.click-me').click(function(e) {
  if ($(e.target).hasClass('click-me')) {
    $(this).css("background-color", "#F00");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="click-me">
  I can be clicked

  <select>
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
  </select>
</div>

Answer 2

这个怎么样：

<div class="click-me" id='myDiv'>
    I can be clicked

    <select>
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </select>
</div>

$('.click-me').click(function(event){
    if(event.target.id == 'myDiv') {
       $(this).css("background-color", "#F00");
    }
});