jQuery的：用鼠標按下事件

我試圖改變輸入的數值範圍內連續變化的輸入值範圍內連續使用，直到上的一個按鈕jQuery的：用鼠標按下事件

代碼我試圖
HTML鼠標按下

<input type="range" id="points" value="50" min="10" max="100" step="1" /> 
<input type="button" id="plus" value="+" /> 
<input type="button" id="minus" value="-" />

的jQuery

$('#plus').on('mousedown', function() { 
    oldvalue = parseInt($('#points').val()); 
    $('#points').val(oldvalue + 5).change(); 
    console.log($('#points').val()); 
    }); 

$('#minus').on('mousedown', function() { 
    oldvalue = parseInt($('#points').val()); 
    $('#points').val(oldvalue - 5).change(); 
    console.log($('#points').val()); 
    });

jsfiddle

與輸入範圍的驗證碼值改變只有一次，但我的要求是不斷變化的值，直到的mousedown

預先感謝幫助

來源

2015-10-15 Dinesh

所以，如果我理解正確的話，你要動態地改變最大輸入範圍在'' – Simplicity

http://stackoverflow.com/questions/4961072/jquery-continuous-mousedown –

TBH它不是100％清晰 - 問題和代碼相互矛盾。你的意思是：當你點擊'＃plus'時，範圍會不斷上升，直到你點擊'＃minus'在這個點繼續下去，直到你點擊'＃plus'？或者你的意思是：當你把鼠標放在'＃plus'上時，它會上升，當你在'#minus'上按住鼠標時它會下降？第二個似乎更可能。 –

您的問題是觸發事件只是一次...你應該什麼做的是要確保（直到事件繼續）您的代碼被定期執行。所以一個想法可以是使用setTinterval()函數在「mousedown」事件上啓動一個週期性定時器，並在clearInterval()的「mouseup」事件中停止它。在我的示例中，我刪除了一個interval「全局」變量。在設置間隔之前，我也只執行了一次該功能，另一方面在點擊它時沒有執行。

希望它有幫助。

var interval; 

$('#plus').on('mousedown', function() { 
    startTime(true); // to work on click also 
    interval = setInterval(function(){startTime(true);}, 500); 
}); 

$('#minus').on('mousedown', function() { 
    startTime(false); // to work on click also 
    interval = setInterval(function(){startTime(false);}, 500); 
}); 

$('.rangeMover').on('mouseup', function() { 
    clearInterval(interval); 
}); 

function startTime(plus) { 
    var oldvalue = parseInt($('#points').val()); 
    if (plus) { 
     $('#points').val(oldvalue + 5).change(); 
    } else { 
     $('#points').val(oldvalue - 5).change(); 
    } 
     console.log($('#points').val()); 
} 

<input type="range" id="points" value="50" min="10" max="100" step="1" /> 
<input type="button" id="plus" class="rangeMover" value="+" /> 
<input type="button" id="minus" class="rangeMover" value="-" />

也意識到HTML修改。

PS：http://jsfiddle.net/uu9o1vam/如果您願意。

來源

2015-10-15 08:05:38

你需要編程的重複性質，所以你可以使用的setInterval（）來做到這一點像

$(document).ready(function() { 
 
    function setRepeatedMouseDown(el, callback) { 
 
    var timer; 
 

 
    $(el).on('mousedown', function() { 
 
     callback(); 
 
     timer = setInterval(callback, 500); 
 
    }).on('mouseleave mouseup', function() { 
 
     clearInterval(timer); 
 
    }); 
 

 
    } 
 

 
    setRepeatedMouseDown('#plus', function() { 
 
    $('#points').val(function(i, val) { 
 
     return +val + 5; 
 
    }).change(); 
 
    }); 
 
    setRepeatedMouseDown('#minus', function() { 
 
    $('#points').val(function(i, val) { 
 
     return +val - 5; 
 
    }).change(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" id="points" value="50" min="10" max="100" step="1" /> 
 
<input type="button" id="plus" value="+" /> 
 
<input type="button" id="minus" value="-" />

來源

2015-10-15 08:17:32

http://jsfiddle.net/arunpjohny/wp1gvtzo/ –

很好的使用回調 –

jQuery的：用鼠標按下事件

回答

相關問題