如何以编程方式触发可拖动的行为
我在jQuery中创建了一个“2D滑块”，其中通过在边界框内拖动“手柄”来同时操作2个参数。
我已经通过在父div中嵌套“handle”div并使用jQuery UI插件来促进拖动行为来实现这一点。 html看起来像：
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中的某个位置，将句柄重新定位到单击位置，然后开始拖动句柄而不让鼠标按钮向上。 基本上，我需要找到一种以编程方式触发拖动function的方法。
我在这里和这里找到了一些建议，并试图通过改变上面的方法来实现他们的建议：
$(".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来阻止冒泡，但无济于事。
所以，如果有人对如何使这项工作有任何建议，我真的很感激。 我这里有一个备份计划，但在我看来这是不必要的复杂。
谢谢！
我设法让这个工作。 我怀疑它与事件处理有关。
修复很简单：我修改了上面的代码来检查事件目标是否与绑定回调的元素相同（即滑块边界框）。 在重新定位句柄的初始单击上，这些是相同的元素。 但是，当触发句柄的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); } });
或者你可以在处理程序的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(); });
这对我不起作用，所以我认为我做错了。 但我想知道，如果它适合你，为什么不设置：
if ($(this).attr("id") == $(event.target).attr("id"))
对此：
if (this === event.target)
一旦我搞清楚了，我就会更新。
仍然没有：在无限循环期间， event.target仍然是滑块，而不是句柄，只有这是实际触发的第二个事件。
编辑：知道了，我从jQuery 1.7.1切换到1.6.4，它的工作原理。