Backbone.js中拖拽dragbar误触发click事件、click与mouseup事件冲突如何解决

根因说明 #

浏览器默认的鼠标交互事件触发顺序为 mousedown → mouseup → click，拖拽操作完整走完前两个事件后会自动触发click事件，因此会误执行收缩/展开逻辑。你当前还存在另一个潜在问题：mouseup绑定在#dragBar元素上，如果拖拽时鼠标移出拖拽条范围再松开，会导致mousemove事件无法解绑，容器会跟随鼠标一直移动。

具体修改步骤 #

1. 新增拖拽状态和拖拽起始位置标记
   在View的初始化方法中新增两个属性，用来标记是否触发了拖拽、以及拖拽的起始X坐标：

initialize: function() {
  // 原有初始化逻辑保留，新增以下内容
  this.isDragging = false;
  this.dragStartX = 0;
},

2. 修改事件绑定和对应处理逻辑
   更新events配置及相关处理方法：

events: {
    'click .sideNavBar': 'toggleHeadersSection',
    'mousedown #dragBar': 'handleDragStart',
    'click #dragBar': 'handleDragBarClick',
},

// 拖拽开始逻辑
handleDragStart: function (event){
    // 记录起始位置，重置拖拽状态
    this.dragStartX = event.pageX;
    this.isDragging = false;
    const self = this;
    // 绑定mousemove和mouseup到document，避免鼠标移出拖拽条后失效
    // 使用事件命名空间.dragbar，避免误清理其他全局事件
    $(document)
      .off('mousemove.dragbar')
      .on('mousemove.dragbar', function(event){
          // 位移超过3px判定为拖拽操作，避免正常点击被误判
          if(Math.abs(event.pageX - self.dragStartX) > 3) {
            self.isDragging = true;
          }
          $('.clinical-data-accordion').css("width",event.pageX+2);
      })
      .off('mouseup.dragbar')
      .on('mouseup.dragbar', function(){
          $(document).off('mousemove.dragbar mouseup.dragbar');
      });
},

// 拖拽条点击拦截逻辑
handleDragBarClick: function(event){
    // 如果是拖拽操作触发的click，直接拦截不执行收缩展开
    if(this.isDragging) {
      this.isDragging = false;
      return;
    }
    // 非拖拽的正常点击，执行原有toggle逻辑
    this.toggleHeadersSection(event);
},

// 原有toggleHeadersSection逻辑无需修改
toggleHeadersSection: function(event){
       let clinicalDetailSection = this.$el.find("#clinicalDetailSection");
       let isHidden = $(clinicalDetailSection).hasClass('isHidden');
       this.displayHeadersSection(isHidden);
   
},

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