EN
JavaScript - on mouse wheel click event
0
points
In this article, we would like to show you on mouse wheel click event in JavaScript.
Quick solution:
function addWheelClickedEventListener(element, callback) {
var started = false;
var removed = false;
var onDocumentMouseup = function(e) {
started = false;
};
var onElementMousedown = function(e) {
e.preventDefault(); // prevents auto-scrolling action
started = (e.button === 1);
};
var onElementMouseup = function(e) {
if (started) {
started = false;
callback(e);
}
};
document.addEventListener('mouseup', onDocumentMouseup);
element.addEventListener('mousedown', onElementMousedown);
element.addEventListener('mouseup', onElementMouseup);
return function() {
if (removed) {
return;
}
removed = true;
document.removeEventListener('mouseup', onDocumentMouseup);
element.removeEventListener('mousedown', onElementMousedown);
element.removeEventListener('mouseup', onElementMouseup);
};
}
// Usage example:
var element = ...;
addWheelClickedEventListener(element, function(e) {
console.log('button clicked with mouse wheel');
});
Practical example
In this example, to handle mouse wheel click we create a function that adds three event listeners:
mouseup- to thedocument, so it can cancel mouse scroll click when we accidentally click on the unwanted area,mousedown- to the buttonelementto handle scroll click on the button,mouseup- to the buttonelementto add the actual callback function that we want to execute on scroll click.
Additionally, we provide a mechanism that helps to remove all the event listeners when not needed.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="element">Click me with mouse wheel</button>
<script>
function addWheelClickedEventListener(element, callback) {
var started = false;
var removed = false;
var onDocumentMouseup = function(e) {
started = false;
};
var onElementMousedown = function(e) {
e.preventDefault(); // prevents auto-scrolling action
started = (e.button === 1);
};
var onElementMouseup = function(e) {
if (started) {
started = false;
callback(e);
}
};
document.addEventListener('mouseup', onDocumentMouseup);
element.addEventListener('mousedown', onElementMousedown);
element.addEventListener('mouseup', onElementMouseup);
return function() {
if (removed) {
return;
}
removed = true;
document.removeEventListener('mouseup', onDocumentMouseup);
element.removeEventListener('mousedown', onElementMousedown);
element.removeEventListener('mouseup', onElementMouseup);
};
}
// Usage example:
var element = document.querySelector('#element');
var removeEventListener = addWheelClickedEventListener(element, function(e) {
console.log('button clicked with mouse wheel');
});
// removeEventListener() helps to remove wheel clicked event listener when not needed
</script>
</body>
</html>