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);

现在，如果页面足够友好，不会覆盖或取消事件（它仍可以执行），则将运行事件处理程序和页面的事件处理程序。

保证不冲突

1 个答案: