Question

我在jQuery中创建了一个“2d滑块”，其中通过在边界框内拖动“手柄”来同时操作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中的某个位置，将句柄重新定位到单击位置，然后开始拖动句柄而不让鼠标按钮向上。基本上，我需要找到一种以编程方式触发拖动功能的方法。

我找到了一些建议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

我设法让这个工作。我怀疑它与事件处理有关。

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

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

$(".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);
    }
});

Answer 2

或者你可以在处理程序的mousedown事件中停止传播，这样它就不会冒泡到滑块的mousedown事件。

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

    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

$(".Slider2dHandle").mousedown(function(event) {
    event.stopPropagation();
});

Answer 3

这对我不起作用，所以我认为我做错了什么。但我想知道，如果它适合你，为什么不设置：

if ($(this).attr("id") == $(event.target).attr("id"))

对此：

if (this === event.target)

一旦我想出来，我就会更新。

仍然没有：在无限循环期间，event.target仍然是滑块，而不是句柄，只有这是实际触发的第二个事件。

编辑：知道了，我从jQuery 1.7.1切换到1.6.4并且它可以工作。

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

3 个答案: