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

});

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

以下是一个例子：

＆＃13;

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);
});

＆＃13;

#capture {
    
    width: 100%;
    height: 100%;
    border: 1px solid black;
    padding: 100px;
}

＆＃13;

<body>
    
    <p id='capture'>CAPTURE EVENTS BOX</p>
    
</body>

＆＃13;

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

1 个答案: