为什么我的'onclick”函数在用户脚本中未定义，如何使用事件侦听器修复它？

Uncaught ReferenceError: Function is Not Defined with onclick

在尝试为网站创建自定义表情脚本时，出现了导致错误“Uncaught ReferenceError”的问题: 函数未使用 onclick 定义。”

问题

脚本包含具有调用函数的 onclick 属性的 span 标签。但是，当单击这些按钮时，功能无法被识别。

解决方案

解决方案在于避免使用用户脚本中的 onclick 属性，因为它们在单独的沙盒环境中运行来自目标页面范围。相反，应该使用事件监听器。

实现事件监听器

要实现事件监听器，请按照以下步骤操作：

将 onclick 替换为事件监听器

改为使用 onclick 属性，将其替换为addEventListener():

<span>

document.getElementById("mySpan").addEventListener("click", myFunction, false);

使用数据属性传递数据

由于我们无法直接将数据传递给事件监听器，所以我们可以使用数据属性：

<span>

targetSpans = emoteTab[2].querySelectorAll("span[data-usage]");
for (var J in targetSpans) {
    targetSpans[J].addEventListener("click", appendEmote, false);
}

追加表情功能

function appendEmote(zEvent) {
    var emoteUsage = this.getAttribute("data-usage");
    shoutdata.value += emoteUsage;
}

附加警告

1。唯一 ID：

确保每个 ID 每页仅使用一次。使用重复的 ID 无效。

2.事件处理程序删除：

使用 .outerHTML 或 .innerHTML 将删除现有的事件处理程序。使用这些方法时要小心。

以上是为什么我的'onclick”函数在用户脚本中未定义，如何使用事件侦听器修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！