Javascript - 突出顯示懸停元素的事件？

我目前使用此代碼綁定在谷歌瀏覽器擴展事件：Javascript - 突出顯示懸停元素的事件？

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上重複使用腳本。儘管這不是重中之重。

來源

2013-05-30 Caramel Truffle

爲什麼你'elem.attachEvent'檢查？如果你正在構建Google Chrome瀏覽器擴展程序，則無需爲IE8補貨... –

@BenjaminGruenbaum嗯......你永遠不會知道。如果Chrome擴展系統移植到舊的IE版本會怎樣？你會做什麼？ –

懸停的相關事件是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);

來源

2013-05-30 15:25:48

@BenjaminGruenbaum即使現代瀏覽器默認第三個參數，爲什麼不包含它以保證「傳統」支持的安全？它並沒有傷害任何東西 – Ian

謝謝，我不知道當我第一次測試'mouseover'時是否錯過了某些東西，或者'mouseover'不能在沒有'mouseout'的情況下使用，但是它們一起工作得很好。然而，它是正常的，在 'bindEvent（文件， '鼠標懸停'，功能（事件） {風險目標= event.target || event.srcElement; /*代碼改變懸停這裏元件*/ } ）;' 或者'mouseout'，'target.style.backgroundColor'等價物總是返回'rgb（255,255,255）'？（'.background'） –

沒關係，我會單獨詢問。 –

Javascript - 突出顯示懸停元素的事件？

回答

相關問題