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

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

3 Answers 3

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