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

Question

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

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

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

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

Answer 1

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

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>

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-10-09 19:20:10

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-10-09 19:20:10

解决方案1
2 已采纳 2014-10-09 19:20:10