jquery：如何在点击 – 保持 – 释放操作后触发事件？

我希望在单击，拖动和释放操作后显示菜单。

如何使用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)); 

Answer 2

您可以使用jQueryUI并让它为您做很多事情。 它还带有一个创建UI（当然，因为它是jQuery UI）

看看这个： http ： //jqueryui.com/demos/droppable/

编辑：

或者看看这里： http ： //jqueryui.com/demos/draggable/仔细看看这里使用的事件。

Answer 3

jQuery UI有一个拖放实现。 如果这不能做你做的事情，你将不得不通过自己跟踪元素上的mouseup和mousedown事件来推出自己的实现。 （并且可能是mouseleave来检测鼠标是否离开了您要跟踪手势的区域。）