Draggable与Droppable组件中表单显示及点击事件异常问题求助

嘿，我帮你分析下这个问题哈，你遇到的拖拽第一个draggable div后点击，却触发第二个元素onclick的情况，大概率是重复绑定事件导致的——每次执行drop函数时，你都会给#first和#close1重新绑定一次click事件，次数多了就会出现事件混乱，甚至误触发其他元素的事件。

下面给你几个可行的解决方案：

方案1：绑定前先解绑旧事件 #

在每次绑定新的click事件前，先移除之前的绑定，避免重复绑定堆积：

$(function() { 
  $(".draggable1").draggable({ cursor: "crosshair" }); 
  $("#droppable").droppable({ 
    drop: function(event, ui) { 
      $("#close1").show(); 
      // 先解绑再绑定，清除之前的事件绑定
      $('#first').off('click').on('click', function(event) { 
        $("#formnew1").show(); 
        event.stopPropagation(); // 用stopPropagation阻止事件冒泡，比preventDefault更适合点击场景
      }); 
      $('#close1').off('click').on('click', function(event) { 
        $("#formnew1").hide(); 
        event.stopPropagation();
      }); 
    }
  });
});

方案2：把事件绑定移出drop函数 #

如果#first和#close1是页面加载后就存在的静态元素，完全可以把click事件绑定放在初始化函数的最外层，不需要每次drop都重复绑定：

$(function() { 
  $(".draggable1").draggable({ cursor: "crosshair" }); 
  
  // 提前绑定点击事件，一次绑定永久生效
  $('#first').on('click', function(event) { 
    $("#formnew1").show(); 
    event.stopPropagation();
  }); 
  $('#close1').on('click', function(event) { 
    $("#formnew1").hide(); 
    event.stopPropagation();
  }); 

  $("#droppable").droppable({ 
    drop: function(event, ui) { 
      $("#close1").show(); 
      // 这里只处理drop时的显示逻辑就好
    }
  });
});

方案3：用事件委托处理动态元素 #

如果#first是拖拽后才动态生成的元素，那推荐用事件委托的方式绑定，只需要绑定一次，不管元素什么时候创建都能生效：

$(function() { 
  $(".draggable1").draggable({ cursor: "crosshair" }); 

  // 绑定到静态父元素（比如body，或者更接近的静态容器）
  $('body').on('click', '#first', function(event) { 
    $("#formnew1").show(); 
    event.stopPropagation();
  }); 
  $('body').on('click', '#close1', function(event) { 
    $("#formnew1").hide(); 
    event.stopPropagation();
  }); 

  $("#droppable").droppable({ 
    drop: function(event, ui) { 
      $("#close1").show(); 
    }
  });
});

按照上面的方法调整后，就不会出现重复绑定导致的事件混乱，也就不会误触发第二个draggable的点击事件啦。

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