jQuery 事件发布
我对 jQuery 比较陌生,所以如果我问一个基本问题,我很抱歉,但我在事件触发方面遇到了问题。现在我正在尝试设计一种图像平移工具,用户可以在查看窗口(固定 div)内向任何方向平移图像。鼠标按下时,该函数将开始执行一些计算,而鼠标移动时,在将值传递到该
$(this).css('background-position', both);
行之前执行更多计算,其中两者都是新计算的位置。
到目前为止它一直有效,但我在从 mousemove
事件释放时遇到问题。在最初的鼠标按下和鼠标移动之后,我似乎无法通过鼠标松开来释放平移,并且用户可以在不单击的情况下平移图像。
这是基本框架(#test
指的是查看 div):
$("#test").mousedown( function(e) {
/* Various Calculations*/
$(this).mousemove( function(f) {
/* More Calculations, variable 'both' is assigned new coord value */
$(this).css('background-position', both);
});
});
我尝试在不同的地方附加一个 mouseup
事件,但我不确定到底在哪里正确的地方是什么,以及如何释放。非常感谢任何帮助!
I'm relatively new to jQuery, so I apologize if I'm asking a rudimentary question, but I have a problem with event triggering. Right now I'm trying to design a kind of Image Panning tool, where the user can pan an image in any direction within a viewing window (a fixed div). On mouse down, the function will start to perform a couple calculations, and on mouse move, perform some more calculations before passing values into the
$(this).css('background-position', both);
line, where both is the newly calculated position.
It works up until this point, but I am having problems releasing from the mousemove
event. After the initial on mouse down and on mouse move, I can't seem to release the panning with an on mouse up, and the user can pan the image without clicking.
Here is the basic skeleton (#test
refers to the viewing div):
$("#test").mousedown( function(e) {
/* Various Calculations*/
$(this).mousemove( function(f) {
/* More Calculations, variable 'both' is assigned new coord value */
$(this).css('background-position', both);
});
});
I've tried attaching a mouseup
event in various places, but I'm not sure exactly where the right place is, and how to release. Any help is greatly appreciated!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
要删除事件,您需要将其与对象解除绑定:
我不清楚您问题的其余部分
to remove the event you need to unbind it from the object:
the rest of your question is not clear to me
作为替代方案,jQuery UI 中的可拖动可能会满足您的需求。它包括启动、停止和拖动事件。
这完全取决于您是否想要另一个依赖项。
至少,您可以检查它们如何执行事件序列来模拟相同的行为。
As an alternative, there is a draggable in jQuery UI that may suit your needs. It includes events for start, stop, and drag.
It all depends on whether you want another dependency.
At the very least, you can examine how they perform their event sequence to simulate the same behavior.