按住按钮 javascript

Question

I'm having a problem with my 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.

The thing that I want to achieve is 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 planning to do this by using JavaScript but I have no idea how to fix this problem. Any suggestions would be very appreciated.

Thanks in advance.

Answer 1

Use onmouseup event.

var button = //your button

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

}

Answer 2

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
   });
};

Answer 3

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