我在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,但在我看来这是不必要的复杂.
谢谢！
解决方法
我设法让这个工作.我怀疑它与事件处理有关.
修复很简单：我修改了上面的代码来检查事件目标是否与绑定回调的元素相同(即滑块边界框).在重新定位句柄的初始单击上,这些是相同的元素.但是,当触发句柄的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);
}
});
