jquery - 如何以编程方式触发可拖动行为

Question

我在 jQuery 中创建了一个“2d slider ”，其中通过拖动边界框中的“ handle ”来同时操作 2 个参数。

我通过在父 div 中嵌套一个“handle”div 并使用 jQuery UI 插件来促进拖动行为来实现这一点。 html 看起来像:

<div class="Slider2d" id="grid_spacing_both">
    <div class="Slider2dHandle" id="grid_spacing_both_handle"></div>
</div>

jQuery 看起来像:

$(".Slider2dHandle").draggable({
    containment: "parent",
    scroll: false,
    drag: function(event, ui) {
        // calculates position and updates value input boxes
    }
});

我还创建了一些代码，将句柄重新定位到父 div 内任何点击的位置:

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
});

我想要做的是修改上述方法，以便用户可以单击父 div 中的某个位置，将 handle 重新定位到单击位置，然后开始拖动 handle 而不松开鼠标按钮。基本上，我需要找出一种以编程方式触发拖动功能的方法。

我找到了一些建议here和 here ，并尝试通过更改上述方法来实现他们的建议，如下所示:

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

这在最技术的意义上是有效的，但它非常慢，并且我从 Safari 收到一堆错误消息，告诉我“RangeError:超出了最大调用堆栈大小”。我认为正在发生的事情是，当我触发句柄上的事件时，它会冒泡到父级，然后父级再次调用触发器，依此类推。我尝试通过在 .trigger() 调用之前和之后将 event.stopPropagation 扔到我的代码中来停止冒泡，但无济于事。

因此，如果有人对如何实现此功能有任何建议，我将非常感激。我有一个备用计划 here ，但在我看来，这似乎不必要地复杂。

谢谢!

Answer 1

我设法让它工作。正如我怀疑的那样，这与事件处理有关。

修复很简单:我修改了上面的代码来检查事件目标是否与回调绑定(bind)到的元素(即 slider 边界框)相同。在重新定位 handle 的初始单击中，这些是相同的元素。但是，当触发 handle 的 mousedown 事件并且该事件向上冒泡到边界框时，该事件的目标是 slider handle 。因此，它们不匹配，并且不会再次调用触发事件，从而引发无限循环。

至少我认为这就是正在发生的事情。无论如何，这是有效的代码:

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location 

    handle = $(".Slider2d").children(".Slider2dHandle");
    if ($(this).attr("id") == $(event.target).attr("id")) {
        handle.trigger(event);
    }
});