jQuery UI：调整大小时意外触发Click事件的问题求助

这个问题其实是浏览器默认行为导致的：当你拖动resize手柄完成后，浏览器会触发mouseup事件，紧接着就会触发click事件——哪怕你根本没有真正点击元素。直接用event.stopPropagation()没用，因为这两个是独立的事件流，阻止resize事件的冒泡并不会影响后续的click事件。

下面给你两种可靠的解决方案：

方案一：利用Resizable的start/stop事件设置标志位 #

通过在resize开始和结束时设置一个状态标志，在click事件中判断这个标志来决定是否执行逻辑：

<!-- 示例HTML结构 -->
<div class="parent">
  <div class="resizable">可调整大小的元素</div>
</div>

let isResizing = false;

// 初始化Resizable组件
$(".resizable").resizable({
  start: function() {
    // 开始调整时标记状态
    isResizing = true;
  },
  stop: function() {
    // 延迟重置状态：因为click事件会在stop事件后立即触发，延迟100ms确保click先判断状态
    setTimeout(() => {
      isResizing = false;
    }, 100);
  }
});

// 给元素和父元素绑定click事件
$(".resizable, .parent").click(function(e) {
  // 如果正在调整大小，阻止click事件执行
  if (isResizing) {
    e.preventDefault();
    e.stopPropagation();
    return;
  }
  
  // 这里写你原本的click逻辑
  console.log("真正的点击事件触发了");
});

方案二：监听手柄的mousedown事件（更精准） #

如果只想针对resize手柄的拖动行为做判断，可以直接监听手柄的mousedown事件：

let isResizing = false;

// 监听所有resize手柄的mousedown事件
$(".ui-resizable-handle").mousedown(function() {
  isResizing = true;
});

// 全局监听mouseup，确保无论在哪里松开鼠标都重置状态
$(document).mouseup(function() {
  setTimeout(() => {
    isResizing = false;
  }, 100);
});

// 同样在click事件中判断状态
$(".resizable, .parent").click(function(e) {
  if (isResizing) {
    e.preventDefault();
    e.stopPropagation();
    return;
  }
  
  console.log("真正的点击事件触发了");
});

关键说明 #

为什么要用setTimeout？因为resize的stop事件触发后，浏览器会立刻触发click事件，如果直接在stop里把isResizing设为false，click事件判断时已经是false了，延迟100ms足够让click事件先完成判断，再重置状态。

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