我怎样才能听jQuery中的点击和按住？

我希望能够在用户点击一个button时触发一个事件，然后持续点击1000到1500毫秒。

有没有jQuery的核心function或插件已经启用了这个？

我应该推出自己的？ 我应该从哪里开始？

Answer 1

var timeoutId = 0; $('#myElement').on('mousedown', function() { timeoutId = setTimeout(myFunction, 1000); }).on('mouseup mouseleave', function() { clearTimeout(timeoutId); }); 

编辑 ：每个AndyE更正…谢谢！

编辑2 ：现在使用绑定现在每个gnarf具有相同的处理程序的两个事件

Answer 2

Aircoded（但在这个小提琴上testing）

 (function($) { function startTrigger(e) { var $elem = $(this); $elem.data('mouseheld_timeout', setTimeout(function() { $elem.trigger('mouseheld'); }, e.data)); } function stopTrigger() { var $elem = $(this); clearTimeout($elem.data('mouseheld_timeout')); } var mouseheld = $.event.special.mouseheld = { setup: function(data) { // the first binding of a mouseheld event on an element will trigger this // lets bind our event handlers var $this = $(this); $this.bind('mousedown', +data || mouseheld.time, startTrigger); $this.bind('mouseleave mouseup', stopTrigger); }, teardown: function() { var $this = $(this); $this.unbind('mousedown', startTrigger); $this.unbind('mouseleave mouseup', stopTrigger); }, time: 750 // default to 750ms }; })(jQuery); // usage $("div").bind('mouseheld', function(e) { console.log('Held', e); }) 

Answer 3

如果有人感兴趣，我做了一个简单的JQuery插件。

http://plugins.jquery.com/pressAndHold/

Answer 4

假设你可以在mousedown启动一个setTimeout调用，然后在mouseup取消它（如果在超时完成之前发生mouseup ）。

但是，看起来像有一个插件： longclick 。

Answer 5

这是我目前的实现：

 $.liveClickHold = function(selector, fn) { $(selector).live("mousedown", function(evt) { var $this = $(this).data("mousedown", true); setTimeout(function() { if ($this.data("mousedown") === true) { fn(evt); } }, 500); }); $(selector).live("mouseup", function(evt) { $(this).data("mousedown", false); }); } 

Answer 6

  var _timeoutId = 0; var _startHoldEvent = function(e) { _timeoutId = setInterval(function() { myFunction.call(e.target); }, 1000); }; var _stopHoldEvent = function() { clearInterval(_timeoutId ); }; $('#myElement').on('mousedown', _startHoldEvent).on('mouseup mouseleave', _stopHoldEvent); 

Answer 7

我写了一些代码，以方便

 //Add custom event listener $(':root').on('mousedown', '*', function() { var el = $(this), events = $._data(this, 'events'); if (events && events.clickHold) { el.data( 'clickHoldTimer', setTimeout( function() { el.trigger('clickHold') }, el.data('clickHoldTimeout') ) ); } }).on('mouseup mouseleave mousemove', '*', function() { clearTimeout($(this).data('clickHoldTimer')); }); //Attach it to the element $('#HoldListener').data('clickHoldTimeout', 2000); //Time to hold $('#HoldListener').on('clickHold', function() { console.log('Worked!'); }); 

 <script src="jquery-3.2.1.min.js"></script> <img src="http://lorempixel.com/400/200/" id="HoldListener">