web-dev-qa-db-ja.com

jquery：マウスダウン効果（左クリックが押されている間）

ボタンを押している間関数を実行し、ボタンを離したときに実行を停止する関数が必要

$('#button').--while being held down--(function() {
     //execute continuously
});
javascriptjquerymouseclick
27
Zebra

私はこのようなものがうまくいくと信じています：

var timeout, clicker = $('#clicker');

clicker.mousedown(function(){
    timeout = setInterval(function(){
        // Do something continuously 
    }, 500);

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

このデモを参照してください： http://jsfiddle.net/8FmRd/

53
Yi Jiang

元の回答を少し変更します。

$('#Clicker').mousedown(function () {
    //do something here
    timeout = setInterval(function () {
        //do same thing here again
    }, 500);

    return false;
});
$('#Clicker').mouseup(function () {
    clearInterval(timeout);
    return false;
});
$('#Clicker').mouseout(function () {
    clearInterval(timeout);
    return false;
});

クリッカーのmouseoutイベントでは、マウスをクリック領域の外に移動すると停止します。

同じことを2回行うことをお勧めする理由は、より滑らかな効果を得るためです。タイムアウトが設定される前に一度これを行わないと、何かが発生する前に、この場合は500msの遅延になります。

18
Tarjei Knutsen

以下は、タッチスクリーンのサポートを拡張した、提供されているソリューションの純粋なJavaScript実装です。 id、actionを実行して（function(){}）、interval（ms）を指定してactionを繰り返します。この実装は、actionの経過を待つのではなく、intervalもすぐに実行することに注意してください。

// Configures an element to execute a function periodically whilst it holds the user's attention via a mouse press and hold.
function assertPeriodicPress(id, action, interval) {
  // Listen for the MouseDown event.
  document.getElementById(id).addEventListener('mousedown', function(ev) { action(); timeout = setInterval(action, interval); return false; }, false);
  // Listen for mouse up events.
  document.getElementById(id).addEventListener('mouseup', function(ev) { clearInterval(timeout); return false; }, false);
  // Listen out for touch end events.
  document.getElementById(id).addEventListener('touchend', function(ev) { clearInterval(timeout); return false; }, false);
}
2
Mapsy
$.fn.click2=function(cb,interval){
   var timeout;
   if(!interval) interval=100;
   $(this).mousedown(function () { 
      var target=this;
       timeout = setInterval(function(){
          cb.apply(target);
       }, interval);

    return false;
   }).mouseup(function () {
      clearInterval(timeout);
      return false;
   }).mouseout(function () {
      clearInterval(timeout);
      return false;
   });
}
1
MajidTaheri