Skip to content
Advertisement

In JavaScript, can I prevent the onmouseup event from being triggered, replacing it with my own event?

I’m creating a slider widget to let me manage ranges of values, and have most of it complete.

Here is a demo of it: https://jsfiddle.net/d1wqb63a/

I want to set it up to actually trigger an onmouseup event when the mouse is released, with additional data in it. That is working, except that it is now triggers the onmouseup twice. Once directly by the browser and once by my code.

You can see that in the jsfiddle demo above. The output to the console is “undefined” when called by the normal event, and some actual data when called by mine, as it’s trying to access the custom info I added.

Here’s what I’m doing to trigger the event:

JavaScript

What I don’t know is how to disable the already triggered event; i.e, stop the browser from triggering the actual onmouseup event despite my adding the onmouseup callback. Is that even doable?

Advertisement

Answer

Alexander‘s answer above is the best generally speaking.

Though looking at your code I think that there is a more precise solution for you.

Solution

Try saving the values you want into the slider element. Then appending your mouseup function to the sildebar element itself instead of the document. Without the need to active a new event, like so:

JavaScript

Your working fiddle:

JavaScript
JavaScript
JavaScript
Note: this fiddle logs [object object] since it doesnt support JSON. I copied it to your fiddle and it works fine.
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement