保證無衝突

Question

我想爲瀏覽器添加一個插件，如果選擇了某項內容，將顯示問號圖片，並在點擊圖片時顯示帶翻譯的工具提示。閱讀文章時在nytimes網頁上顯示，但更方便用戶使用。用於顯示圖像我用這個：

function ShowQuestionMark(e)      
    { 
    if (window.getSelection().toString() != "") 
    { 
     /* add an img tag */ 
     document.onmouseup = RemoveQuestionMark; 
    } 
    } 

function RemoveQuestionMark(e) 
{ 
    /* remove img tag */ 
    document.onmouseup = ShowQuestionMark; 
} 

document.onmouseup = ShowQuestionMark; 

我的目標是讓每個網頁上工作（或儘可能多）。

現在我的第一個問題。我假設，當我以這種方式使用它並加載一個頁面，該頁面默認具有onmouseup事件的處理程序，我會覆蓋它，無論處理程序是什麼，它在觸發onmouseup事件時都不會執行。我對麼？
第二個問題，我該如何保證，我的腳本不會覆蓋/打破任何默認行爲？我應該使用綁定嗎？或者我應該創建新的獨特事件？還是其他的東西？

Answer 1

我不知道第一個問題的答案，因爲在編寫擴展時，我從來沒有直接分配過類似的事件處理程序，因此知道會發生衝突。但我認爲頁面的事件處理程序會覆蓋你的。無論哪種方式，您都需要避免衝突。

總之，這裏是你如何避免衝突：使用的addEventListener（）：

function ShowQuestionMark(e) { 
    if (window.getSelection().toString() != "") { 
     document.removeEventListener("mouseup", ShowQuestionMark); 
     /* add an img tag */ 
     yourImgTag.addEventListener("click", RemoveQuestionMark); 
    } 
} 

function RemoveQuestionMark(e) { 
    yourImgTag.removeEventListener("click", RemoveQuestionMark); 
    /* remove img tag */ 
    document.addEventListener("mouseup", ShowQuestionMark); 
} 

document.addEventListener("mouseup", ShowQuestionMark); 

現在，如果頁面還跟不覆蓋或取消事件（它仍然可以做），無論是你的事件處理程序和頁面的事件處理程序將運行。