How to perform the onlick event even when the div is dragged?

Question

I have a div:

<div 
    id="up" 
    onmousedown="mousedown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" 
    onclick="changePage('up')">
</div>

When I press it the onmousedown is triggered, but when I dragged away from the button and remove the click, the onclick event is not triggered. How can I trigger it without using onmouseout? (ondrag is not supported)

Answer 1

I suggest adding listeners to the div. You can then use it like this:

  //get div  
var div = document.getElementById('up');
//Define a funcion where you do what you want on mouse release.
//Remove the listener after you are done.
function up() {
    //console.log("up")
    //do stuff
    window.removeEventListener('mouseup', up);
}
div.addEventListener('mousedown', function (e) {
    //console.log("down");
    //Do stuff
    //Call mouseup when you are done with mouse down.
    window.addEventListener('mouseup', up);

})