我目前正在使用此代码绑定Google Chrome扩展程序中的事件:
var bindEvent = function(elem ,evt,cb) {
//see if the addEventListener function exists on the element
if ( elem.addEventListener ) {
elem.addEventListener(evt,cb,false);
//if addEventListener is not present, see if this is an IE browser
} else if ( elem.attachEvent ) {
//prefix the event type with "on"
elem.attachEvent('on' + evt, function(){
/* use call to simulate addEventListener
* This will make sure the callback gets the element for "this"
* and will ensure the function's first argument is the event object
*/
cb.call(event.srcElement,event);
});
}
};
/* ... */
bindEvent(document,'click', function(event)
{ var target = event.target || event.srcElement;
/*Code to do stuff about a clicked element*/
this.removeEventListener('click',arguments.callee,false);
});
它适用于click事件。 现在,我的问题是:我可以用什么事件来改变一些悬停而不是简单点击的元素?最终目标是改变光标悬停的元素的背景颜色。
我尝试了mouseover,mouseenter,focus和focusin无济于事。确切地说,我试图在事件触发时执行console.log(),但它从未发生过,除非有一次我点击一个对话框并且它检测到我对该元素的关注。
我目前正在使用chrome(v24.0),但跨浏览器解决方案将是一个不错的功能,因为我计划稍后在firefox上重用该脚本。但这不是首要任务。
答案 0 :(得分:2)
悬停的相关事件是mouseover
和mouseout
- 当鼠标分别进入或离开元素时会触发它们。但是,由于该事件也是为您附加监听器的元素的子元素触发的,并且这些事件冒出来,您还必须检查event.target
:
elem.addEventListener("mouseover", function(event) {
if (event.target == elem) {
// Mouse pointer entered elem
}
}, false);
elem.addEventListener("mouseout", function(event) {
if (event.target == elem) {
// Mouse pointer left elem
}
}, false);