为了避免jQuery UI可拖动也触发click事件,可以采取以下方法:
draggable
插件的cancel
选项。将cancel
选项设置为可拖动元素内部的某个元素或选择器,这样点击该元素时就不会触发click事件。例如:$("#draggable").draggable({
cancel: ".no-click"
});
在上述代码中,.no-click
是可拖动元素内部的一个元素,点击该元素时不会触发click事件。
event.stopPropagation()
方法。在可拖动元素的click事件处理函数中调用event.stopPropagation()
方法,阻止事件冒泡到父元素,从而避免触发父元素的click事件。例如:$("#draggable").on("click", function(event) {
event.stopPropagation();
});
在上述代码中,点击可拖动元素时,click事件不会冒泡到父元素。
event.preventDefault()
方法。在可拖动元素的mousedown事件处理函数中调用event.preventDefault()
方法,阻止默认的mousedown行为,从而避免触发click事件。例如:$("#draggable").on("mousedown", function(event) {
event.preventDefault();
});
在上述代码中,点击可拖动元素时,不会触发默认的mousedown行为,进而避免了click事件的触发。
以上是避免jQuery UI可拖动也触发click事件的几种常见方法。根据具体情况选择适合的方法来解决该问题。
领取专属 10元无门槛券
手把手带您无忧上云