javascript - jquery:如何在单击-按住-释放操作后触发事件？

Question

我想在单击、拖动和释放操作后显示一个菜单。

我如何使用 jQuery 触发它？

Answer 1

1. 监听应点击的任何内容的 mousedown 事件。
2. 将 mousemove 和 mouseup 事件处理程序添加到 window
3. 在 mouseup 事件处理程序中调用 trigger('yourcustomeventhere') 任何你喜欢的元素。此外，从 window
中删除 mouseup 和 mousemove 事件处理程序
4. ...?
5. 利润。

jQuery 是可以为您完成这项工作的库。我以为我对代码的解释足够好，但显然没有:

$(anElement).mousedown(foodown);

function foodown(){
  $(window).mousemove(foomove).mouseup(fooup);
  //stuff
}

function foomove(){
  //stuff
}

function fooup(){
  $(someElement).trigger('yourcustomevent');
  $(window).unbind('mousemove', foomove).unbind('mouseup', fooup);
}

---

/**
 * Dragondrop jQuery plugin by zzzzBov
 */
(function ($) {
  "use strict";
  var $window;

  function begin(e) {
    var event;
    $window.mousemove(drag).mouseup(end);
    event = $.Event('beginDragon');
    $(e.target).trigger(event);
    if (event.isDefaultPrevented()) {
      e.preventDefault();
    }
  }

  function drag(e) {
    var event;
    event = $.Event('dragDragon');
    $(e.target).trigger(event);
    if (event.isDefaultPrevented()) {
      e.preventDefault();
    }
  }

  function end(e) {
    var event;
    event = $.Event('endDragon');
    $(e.target).trigger(event);
    $window.unbind('mousemove', drag).unbind('mouseup', end);
    if (event.isDefaultPrevented()) {
      e.preventDefault();
    }
  }

  $.each('beginDragon dragDragon endDragon'.split(' '), function (i, name) {
    $.fn[name] = function(data,fn) {
      if (fn == null) {
        fn = data;
        data = null;
      }
      return arguments.length > 0 ?
        this.bind(name, data, fn) :
        this.trigger(name);
    };
  });

    $window = $(window);
    $window.mousedown(begin);
}(jQuery));