javascript - Press and hold button does not fire onClick - Stack Overflow

admin管理员组

文章数量:1025457

I'm having a problem with the button in my HTML5 application.

When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.

I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.

I'm having a problem with the button in my HTML5 application.

When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.

I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.

• javascript
• html

Share Improve this question Follow edited Oct 6, 2022 at 0:13 Christian 5,59444 gold badges2929 silver badges4444 bronze badges asked Dec 24, 2014 at 10:03 brasaybrasay 13511 gold badge22 silver badges1414 bronze badges 1

• onmouseup (w3schools./jsref/event_onmouseup.asp) should help. – tacticurv Commented Dec 24, 2014 at 10:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

Use onmouseup event.

var button = //your button

button.onmouseup = function() {
//your logic

}

Actually onmousedown event instead of onClick will do the trick.

Again the same syntax:

Javascript

<button onmousedown ="clickFunction()">Click me!</button>

function clickFunction(){
//code goes here
}

jQuery

function clickFunction(){
   $(button).onmousedown(function(){
       //code goes here
   });
};

you should use a boolean to save the current state.

var mouse_is_down = false;
var current_i = 0;              // current_i is used to handle double click (to not act like a hold)

var button = document.querySelector("#myButton");

button.onmousedown = function(){
    mouse_is_down = true;

    // Do thing here for a mousedown event

    setTimeout(
        (function(index){
            return function(){
                if(mouse_is_down && current_i === index){
                    //do thing when hold                        
                }
            };
        })(++current_i), 500); // time you want to hold before fire action in milliseconds
};

button.onmouseup = function(){
    mouse_is_down = false;
    current_i++;

    // Do thing here for a mouseup event
};

Fiddle : link

I'm having a problem with the button in my HTML5 application.

When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.

I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.

I'm having a problem with the button in my HTML5 application.

When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.

I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.

• javascript
• html

Share Improve this question Follow edited Oct 6, 2022 at 0:13 Christian 5,59444 gold badges2929 silver badges4444 bronze badges asked Dec 24, 2014 at 10:03 brasaybrasay 13511 gold badge22 silver badges1414 bronze badges 1

• onmouseup (w3schools./jsref/event_onmouseup.asp) should help. – tacticurv Commented Dec 24, 2014 at 10:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

Use onmouseup event.

var button = //your button

button.onmouseup = function() {
//your logic

}

Actually onmousedown event instead of onClick will do the trick.

Again the same syntax:

Javascript

<button onmousedown ="clickFunction()">Click me!</button>

function clickFunction(){
//code goes here
}

jQuery

function clickFunction(){
   $(button).onmousedown(function(){
       //code goes here
   });
};

you should use a boolean to save the current state.

var mouse_is_down = false;
var current_i = 0;              // current_i is used to handle double click (to not act like a hold)

var button = document.querySelector("#myButton");

button.onmousedown = function(){
    mouse_is_down = true;

    // Do thing here for a mousedown event

    setTimeout(
        (function(index){
            return function(){
                if(mouse_is_down && current_i === index){
                    //do thing when hold                        
                }
            };
        })(++current_i), 500); // time you want to hold before fire action in milliseconds
};

button.onmouseup = function(){
    mouse_is_down = false;
    current_i++;

    // Do thing here for a mouseup event
};

Fiddle : link

本文标签： javascriptPress and hold button does not fire onClickStack Overflow