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

Question

I want to write in Javascript a generic eventListener for any possible mouse event.我想在 Javascript 中为任何可能的鼠标事件编写一个通用的eventListener 。

I am trying to write an eventListener that handles any mouse moves inside the webpage, presses of any kind, scrolling and everything that can be done using the mouse.我正在尝试编写一个eventListener来处理网页内的任何鼠标移动、任何类型的按下、滚动以及可以使用鼠标完成的所有操作。

I didn't find a good way to do it, also because I need it to be done using pure Javascript without jQuery or any other libraries, just using simple DOM elements and function.我没有找到一个很好的方法来做到这一点，也因为我需要使用纯 Javascript 来完成它，没有 jQuery 或任何其他库，只使用简单的 DOM 元素和函数。

Can anyone show me how it is done by writing one good handler (and not a handler for each possible event)?任何人都可以通过编写一个好的处理程序（而不是每个可能的事件的处理程序）来告诉我它是如何完成的吗？

Answer 1

What you can do is add event listeners for all mouse events but use the same handler function.您可以做的是为所有鼠标事件添加事件侦听器，但使用相同的处理函数。 Something like this:像这样的东西：

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

});

Note: this would work for any event, not just the ones related to the mouse.注意：这适用于任何事件，而不仅仅是与鼠标相关的事件。

Here's an example:下面是一个例子：

 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