将单击与 JQuery 中的可拖动功能分开

Posted 2023-05-08

【中文标题】将单击与 JQuery 中的可拖动功能分开

【英文标题】：Separating click from draggable functionality in JQuery

【发布时间】：2015-04-05 16:17:37

【问题描述】：

如果点击事件功能与拖动事件功能都附加到同一个对象，有没有办法将它们分开？

我正在添加一个点击类。我的应用程序的目标是，当用户“点击”和项目时，它的可拖动功能被禁用。

相反，如果用户拖动项目，则不应触发点击。

这可能吗？

这是我对以下代码的小提琴...

jsFiddle

html:

<div class="buttonBox"></div>

jQuery:

var bool = false;
var buttonBox = $(".buttonBox");

buttonBox.off("click");
buttonBox.on("click", function (event, ui) 
    console.log("class Added");
    $bool = true;
    var self = $(this);
    self.addClass("selectedBox");
);

buttonBox.draggable(
    distance: 40,
    disabled: bool,
    revert: "invalid",
    revertDuration: 400,
    refreshPositions: true,

);

【问题讨论】：

你可以试试 .on() 和 .off() api.jquery.com/off

重复：***.com/questions/1771627/…

在您发布的代码中buttonBox.off("click"); 没有任何意义

我们正在查看来自更大应用程序的示例。我已经读到您应该将前面的 .off() 与您的 .on() 配对，以便在添加新的点击事件之前删除您之前的点击事件。

【参考方案1】：

您可以使用可拖动元素的start 事件来设置您的逻辑：

buttonBox.on("click", function (event, ui) 
    if($(this).hasClass('dragging')) 
        $(this).removeClass('dragging');
        return;
    
    console.log("class Added");
    $bool = true;
    var self = $(this);
    self.addClass("selectedBox");
);

buttonBox.draggable(
    start: function()
        if($(this).hasClass('selectedBox')) return false;
        $(this).addClass('dragging');
    ,
    distance: 40,
    disabled: bool,
    revert: "invalid",
    revertDuration: 400,
    refreshPositions: true,

);

-jsFiddle-

【讨论】：

所以我可以摆脱 bool 变量？

@DanBeaulieu 是的，这里没有使用

【参考方案2】：

您可以在点击事件开始时稍等片刻，然后仅在该元素未被拖动时触发点击事件功能。

buttonBox.on("click", function (event, ui) 
    setTimeout(function (ev, ui) 
        if($(ev.target).hasClass("ui-draggable-dragging"))
            return;
        console.log("class Added");
        $(ev.target).addClass("selectedBox");
    , 50, event, ui);
);

小提琴：http://jsfiddle.net/doqpbuvy/3/

【讨论】：

这也是一个很好的解决方案。我将研究这两个，看看它们在我的项目中的作用。无论哪种方式，我都会投票支持你花时间解决这个问题。谢谢奥赞。