插件与javascript函数冲突的原因

Question

前几天为了赶快写代码，在下面加上了不好的代码。

<td class="note_box_con" onclick="getElementsByTagName('a')[0].click();">

之后，当我尝试使用 Javascript 编写的文本编辑器插件时，我发现

文本编辑器插件和DOM的功能相互冲突

现在我知道问题出在哪里并解决了。但是我不明白 getElementsByTagName('a')[0].click(); 有什么样的风险。

在我看来，该代码只是 addEventlistener function().....

what kind of risk onclick="getElementsByTagName('a')[0].click();" has?

Answer 1

以我的理解，这样做是一种不好的做法。我宁愿建议你使用类名或 ID 来获取。

如果您使用的某些资源会向您的页面添加锚标记，这会破坏您的逻辑。

模拟如下：

var count = 0;
function addAnchor(){
  var div = document.getElementById("content");
  var str = "<a href='#'>" + count++ + "</a>";
  div.innerHTML = str + div.innerHTML;
}

document.getElementsByTagName("a")[0].addEventListener("click", function(){
  console.log(this.innerHTML);
  return false;
})

<div id="content">
  <a href="#">Test</a>
</div>

<button onclick="addAnchor()">Add Link</button>
<a onclick="document.getElementsByTagName('a')[0].click()"> test </a>

此外，如果 DOM 结构发生变化，您的代码将无法正常运行。最好使用能够唯一标识元素的正确选择器。

插件与javascript函数冲突的原因

the reason why Conflict between plugin and javascript function occured

javascript

onclick

conflict

event-listener