使用JavaScript检测页面中的任何鼠标事件

Detect any mouse event in the page using JavaScript

本文关键字：任何 鼠标 事件 JavaScript 检测 使用      更新时间：2023-09-26

我想用Javascript为任何可能的鼠标事件编写一个通用的eventListener。

我正在尝试编写一个eventListener，它可以处理网页内的任何鼠标移动、任何类型的按压、滚动以及使用鼠标可以完成的所有操作。

我没有找到一个好的方法来做这件事，也是因为我需要使用纯Javascript，而不使用jQuery或任何其他库，只使用简单的DOM元素和函数。

有人能告诉我如何通过编写一个好的处理程序（而不是为每个可能的事件编写一个处理程序）来完成吗？

您可以为所有鼠标事件添加事件侦听器，但使用相同的处理程序函数。类似这样的东西：

function bindEventsToSameHandler(element, events, handler) {
    for(var i = 0; i < events.length; i++) {
        element.addEventListener(events[i], handler);
    }
}
// ...
// usage
var element = document.getElementById('selector'); // select the element on which to handle mouse events
var events = ['click', 'mouseup', 'mousedown'];    // add mouse events you want to handle
bindEventsToSameHandler(element, events, function() {
    // your handler code goes here
});

注意：这适用于任何事件，而不仅仅是与鼠标相关的事件

这里有一个例子：

function bindEventsToSameHandler(element, events, handler) {
    for(var i = 0; i < events.length; i++) {
        element.addEventListener(events[i], handler);
    }
}
// usage
element = document.getElementById('capture');
events = ['click', 'dblclick', 'mouseup', 'mousedown']; // add your events here
bindEventsToSameHandler(element, events, function(e) {
    console.debug('handled ' + e.type);
});
#capture {
    
    width: 100%;
    height: 100%;
    border: 1px solid black;
    padding: 100px;
}
<body>
    
    <p id='capture'>CAPTURE EVENTS BOX</p>
    
</body>

相关文章：