ユーザースクリプトで「onclick」関数が定義されていないのはなぜですか? イベント リスナーを使用してそれを修正するにはどうすればよいですか?

Uncaught ReferenceError: Function is Not Defined with onclick

Web サイト用のカスタム エモート スクリプトを作成しようとすると、エラー「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 がページごとに 1 回だけ使用されるようにします。重複したIDの使用は無効です。

2.イベント ハンドラーの削除:

.outerHTML または .innerHTML を使用すると、既存のイベント ハンドラーが削除されます。これらの方法を使用する場合は注意してください。

以上がユーザースクリプトで「onclick」関数が定義されていないのはなぜですか? イベント リスナーを使用してそれを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。