如何防止父元素拖拽时触发子元素的click事件？

先修正你代码里的小错误：你写的$("parent")和$("child")是错的，类选择器要加.，应该写成$(".parent")和$(".child")，不然根本选不到对应元素。

问题出在：拖拽完成松开鼠标后，浏览器会自动触发一次click事件，这个事件会被子元素的click监听器捕获，导致误触发样式切换。解决办法就是用一个状态标记，区分是真正的点击操作，还是拖拽结束后产生的虚假click。

改好的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
.parent {
  display: inline-grid;
  grid-template-columns: 64px 64px;
  border: 2px solid black;
  background-color: blue;
}

.child {
  background-color: gray;
  border: 1px solid black;
  height: 64px;
}

.blue {
  background-color: blue !important;
}
</style>

<script>
$( document ).ready(function() {
    let isDragging = false;

    $(".parent").draggable({
        start: function() {
            // 开始拖拽时标记状态
            isDragging = true;
        },
        stop: function() {
            // 拖拽结束后延迟重置标记，确保click事件先判断状态
            setTimeout(() => {
                isDragging = false;
            }, 100);
        }
    });

    $(".child").click(function(e){
        // 如果是拖拽后的虚假click，直接跳过操作
        if (isDragging) {
            return false;
        }
        $(this).toggleClass('blue');
    });
});
</script>

原理说明 #

• 用isDragging变量跟踪拖拽状态：开始拖拽时设为true，拖拽结束后延迟100ms设为false——这是因为click事件会在stop回调之后立即触发，延迟重置能保证click判断时状态还是true。
• 子元素的click事件里先检查这个标记，要是是拖拽状态下的click，直接返回不执行切换样式的操作，就不会误触发了。

内容的提问来源于stack exchange，提问作者MechMK1