11

<article>タグ付きのすべての要素に「クリック」のEventListenerを設定するJavaScriptファイルがあります。イベントが発生したときにクリックされた記事のIDを取得したい。何らかの理由で、私のコードは何も生成しません！

私のJavaScript：

articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect(e),false);
function redirect(e){
alert(e.target.id);
}

なぜこれが機能しないのですか？ところで、私の記事の設定は、ウィンドウが読み込まれたときに呼び出される関数にあります。その関数には他にも機能するものがあるため、確実に機能することはわかっています。

編集

そこで、コードを修正して、ループしてすべての記事要素にリスナーを追加すると、何も入っていないアラートボックスが表示されます。IDなしでe.targetを出力しようとすると、すべての要素に対して次のメッセージが表示されます。

[object HTMLHeadingElement]

助言がありますか？

別の編集

私の現在のJavaScriptコード：

function doFirst(){
articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect(articles[i]),false);
}
}

function redirect(e){
alert(e.id);
}
window.addEventListener('load',doFirst,false);

これは、ページの読み込みが完了したときにアラートボックスを表示していますが、いまいましいものをクリックしていないことを考慮していません：O

4

7 に答える 7

12

パラメータとしてリダイレクトする記事オブジェクトを渡していない。

これを試してください（編集）：

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(ev){
    alert(ev.target.id);
}

うまくいけば、それはバグを解決するでしょう。

于 2012-12-15T16:35:43.670 に答える
11

クリックされた要素をチェックする単一のイベントについて誰も言及していないのはなぜですか？

document.body.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName === 'article') {
        // do whatever you like ;-)
    }
    e.stopPropagation()
});

イベントが少ないほどパフォーマンスが向上します。

全身のクリックイベントをチェックする必要がない場合は、イベントをより近い親要素にアタッチできます

于 2016-03-06T07:52:56.853 に答える
4

参照を渡す代わりにリダイレクト関数を実行している場合は、次のことを試してください。

articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect,false);
function redirect(e){
    alert(e.target.id);
}

編集： また、getElementsByTagNameは記事を含む配列を返すため、記事をループして、それぞれでaddEventListenerを呼び出す必要があります。

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(e){
    alert(e.target.id);
}
于 2012-12-15T14:41:59.633 に答える
2

getElementsByTagNameノードリストを返します。次に、forループを使用して、これらの要素のそれぞれにイベントリスナーを追加できます。

<div id="test">
hey
</div>
<div id="test2">
yo
</div>

<script>
var nl = document.getElementsByTagName('div');

for(var i=0; i<nl.length; i++){
    nl[i].addEventListener('click', function(e){
        alert(e.target.id);
    },false);
}
</script>
于 2012-12-15T14:51:39.297 に答える
0

このミニJavaScriptライブラリ（1.3 KB）は、これらすべてのことを実行できます

https://github.com/Norair1997/norjs/ 

nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);

このプラグインはそのようなものなどを処理できます

于 2018-05-27T19:32:40.300 に答える
0

この古い投稿をぶつけてください、しかし私はこのようなことをします

const myElements = document.querySelectorAll("article")
myElements.forEach(x => x.setAttribute("onclick", "alertFunction(this.id)"))

function alertFunction(theId){
alert(theId)
}

それは、JavaScriptが必要なものである場合です。しかし、今日では代わりにJQueryを使用でき、コードが少なくなります。

于 2021-12-15T00:42:28.447 に答える
-1 
articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did.

動作しない場合は、以下のようにアラート内でe.target.idではなくe.idを試してください。

   alert(this.id);

ありがとう。

于 2012-12-15T14:59:05.310 に答える