jquery - 如何在jQuery中绑定多个顺序事件？

Question

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

单击div1- 也称为 mousedown 事件 - 现在，如果您在仍然按下鼠标的同时开始移动鼠标，那么执行一些功能。

这样做最顺利的方法是什么？只是为了打电话，还是有更简单的东西if？.on()

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() { ... }
});​

你可以在这里看到它。