How to Add MouseDown Event to a Button

Question

I have a button which is like below and a jquery which increase the size of the slider perfectly

<button id='plus' type="button">+</button>

$('#plus').click(function() {
     s.slider('value', s.slider('value') + s.slider( "option", "step" ) );   
 });

BUT I would like to change the size up as long as the muse is down over the button. so I tried this but it didn't do the job! (it is actually acting like click event).

$('#plus').mousedown(function() {
    s.slider('value', s.slider('value') + s.slider( "option", "step" ) );   
});

Can you please let me know how I can do this in jQuery?

Your code seems ok, can you move your entire page to jsFiddle and add the link? — Osman M Elsayed, Mar 13 '14 at 19:20

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

i just understood that you want something to continuously happen while the button is pressed down.

see this answer,

the main idea is to start an interval when button is down, which will do the update on every round, and when the button is released, this interval will stop.

for example:

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

clicker.mousedown(function(){
    timeout = setInterval(function(){
        // Do something continuously 
        s.slider('value', s.slider('value') + s.slider( "option", "step" );
    }, 500);

    return false;
});

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

hope that helps.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 13 '14 at 19:14

geevee

5,281
5
29
48

Thanks Gal V but same thing happening – Mona Coder Mar 13 '14 at 19:16
@MonaCoder iv'e edited my answer, now i understand you better. – geevee Mar 13 '14 at 19:18
Thanks Gal this is working now! sorry I need 6 more mins to accept your reply as a correct answer – Mona Coder Mar 13 '14 at 19:22

score 1 · Answer 2 · answered Mar 13 '14 at 19:15

1

Try

$('#plus').bind('mousedown', function() { s.slider('value', s.slider('value') + s.slider( "option", "step" ) );
});

OR

$('#plus').on('mousedown', function() { s.slider('value', s.slider('value') + s.slider( "option", "step" ) );
});

answered Mar 13 '14 at 19:15

Sajad Karuthedath

14,143
3
30
49

score 0 · Answer 3 · answered Mar 13 '14 at 19:17

0

as bind is deprecated using on should be the better solution:

$('#plus').on('mousedown', function() {
    s.slider('value', s.slider('value') + s.slider( "option", "step" ) );   
});

answered Mar 13 '14 at 19:17

roman

10,867
1
28
42

How to Add MouseDown Event to a Button

3 Answers3