[Edit]

JavaScript - on mouse wheel click event

1 contributors

2 contributions

0 discussions

0 points

Created by:

ArcadeParade

666

In this article, we would like to show you on mouse wheel click event in JavaScript.

Quick solution:

xxxxxxxxxx
 
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

Edit

In this example, to handle mouse wheel click we create a function that adds three event listeners:

mouseup - to the document, so it can cancel mouse scroll click when we accidentally click on the unwanted area,
mousedown - to the button element to handle scroll click on the button,
mouseup - to the button element to 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.

xxxxxxxxxx
 
<!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>