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

ここでライブを見ることができます。