gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 17:15:00 26 4
gpt4 key购买 nike

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

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

我没有找到一个好的方法,也因为我需要使用没有 jQuery 或任何其他库的纯 Javascript 来完成它,只使用简单的 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>

关于javascript - 使用 JavaScript 检测页面中的任何鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26286218/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com