如何在jQuery中绑定多个连续事件

Question

我希望能够使用jquery绑定多个连续事件。我想做以下事情：

点击div1，也就是鼠标按下事件-现在，如果你在按下鼠标的同时开始移动鼠标，那么就执行一些功能。

做这件事最顺利的方法是什么？只是在.on()调用中放入一个if，或者有更简单的方法吗？

Answer 1

您可以使用.on()和.off()来实现这一点。

var $div = $("div");
var mousemove = function() { ... };
$div.on({
mousedown: function() {
$div.on("mousemove", mousemove);
},
mouseup: function() {
$div.off("mousemove", mousemove);
}
});​

请注意，建议使用.on()和.off()分别绑定和取消绑定事件。

你可以查看一个实例。

---

更新

或者，您可以将mouseup事件绑定到document。这样，即使鼠标在悬停元素时没有释放，也可以检测到鼠标的释放。

var $document = $(document);
var $div = $("div");
var mousemove = function() { ... };
$div.mousedown(function() {
$div.on("mousemove", mousemove);
})
$document.mouseup(function() {
$div.off("mousemove", mousemove);
});​

---

还有一个简写函数。让我们称之为.drag()。

$.fn.drag = function(fn) {
var $document = $(document);
return $(this).each(function() {
var self = this;
var $this = $(this);
var mousemove = function() {
fn.dragging && fn.dragging.call($this);
};
$this.mousedown(function() {
fn.start && fn.start.call($this);
fn.dragging && $this.on("mousemove", mousemove);
});
$document.mouseup(function() {
fn.dragging && $this.off("mousemove", mousemove);
fn.stop && fn.stop.call(self);
});
});
};

$("div").drag({
start: function() { ... },
dragging: function() { ... },
stop: function() { ... }
});​

你可以在这里看到它的生活。