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

Question

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

jquery

4

我想用jquery绑定多个连续事件。我想要实现以下功能：

点击 - 即mousedown事件 - 现在，如果你在按下鼠标的同时开始移动鼠标，则执行某些函数。

最顺畅的方法是什么？只需在.on()调用中放置一个if，还是有更简单的方法？

- user1015214

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander · Accepted Answer

您可以利用 .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() { ... }
});

你可以在这里实时查看。