在我的 html 中，我有需要响应用户点击的 div。我有一个新要求，即在该 div 中添加一些输入控件，但是单击它们会导致触发 div 的单击事件。
是否可以在不干扰输入功能的情况下防止这种情况发生？
$('.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 上的事件
方案一:事件目标过滤
您可以在没有太多额外代码的情况下完成此操作，而不会阻止事件冒泡，这可能会在以后产生意想不到的效果，或者实际上通过添加任何额外的事件绑定(bind)..
简单地为事件建立原始目标，然后如果不是输入等则只运行相关代码:
$('.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>
方案一:事件目标匹配
或者，检查事件目标是否是实际的 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>