我正在编写一个脚本,我只想在鼠标事件之前没有被任何其他元素处理过的情况下处理它们。
我可以将事件侦听器附加到文档对象,但它会接收所有事件,无论它们是否已被处理。
我无法控制 HTML 页面中的元素,因此在处理事件时无法手动 stopPropagation()。
有任何想法吗?
我正在编写一个脚本,我只想在鼠标事件之前没有被任何其他元素处理过的情况下处理它们。
我可以将事件侦听器附加到文档对象,但它会接收所有事件,无论它们是否已被处理。
我无法控制 HTML 页面中的元素,因此在处理事件时无法手动 stopPropagation()。
有任何想法吗?
因此,您可以在特定情况下完成您想要的事情。具体来说,如果
实际上,您所做的是将目标元素上的原始 addEventListener 方法替换为自定义方法,该方法拦截调用,进行一些特殊处理,然后让它正常继续。这种“特殊处理”是一个新函数,它包装了原始回调,并用某种状态标记事件参数,让您知道其他人已经处理了该事件。这是一个概念证明(带有jsFiddle)
目标 HTML:
<div id='asdf'>asdf</div>
JavaScript:
var target = document.getElementById('asdf');
var original = target.addEventListener;
var updated = function(){
// Grab the original callback, so we can use it in our wrapper
var originalFunc = arguments[1];
// Create new function for the callback, that lets us set a state letting us know it has been handled by someone
// Finish the callback by executing the original callback
var newFunc = function(e){
console.log('haha, intercepted you');
e.intercepted = true;
originalFunc.call(this, e);
};
// Set the new function in place in the original arguments 'array'
arguments[1] = newFunc;
// Perform the standard addEventListener logic with our new wrapper function
original.apply(this, arguments);
};
// Set the addEventListener on our target to our modified version
target.addEventListener = updated;
// Standard event handling
target.addEventListener('click', function(e){
console.log('original click');
console.log('intercepted?', e.intercepted);
})
从这篇文章到这里。
似乎还不可能做到这一点。
注册了哪些事件处理程序?
W3C 事件注册模型当前实现的一个问题是,您无法确定是否有任何事件处理程序已注册到元素。在传统模型中,您可以这样做:
alert(element.onclick)
并且您会看到注册到它的函数,如果没有注册则未定义。仅在其最近的 DOM Level 3 Events W3C 中添加了一个
eventListenerList
存储当前在元素上注册的事件处理程序列表。任何浏览器尚不支持此功能,它太新了。但是,问题已经解决。
幸运的是
removeEventListener()
如果您要删除的事件侦听器尚未添加到元素中,则不会给出任何错误,因此当您有疑问时,您始终可以使用 removeEventListener()。