JavaScript - バブルを止める

Question

私は誰かが次のJSを見ることができるかどうか疑問に思った。私がしたいのは、divをクリックすることができるようにすることで、ここには「ここ」の警告ボックスが表示されます。 aをクリックし、「アンカー」警告が表示されるようにすることもできます。

「ここ」のアラートボックスが再び表示されるという問題があります。 .stopPropagation()を試してみましたが、期待どおりに動作していません。

マイコード：

function testMessage() { 
 
    alert("Here"); 
 
} 
 

 
function anchorClick() { 
 
    alert("Anchor"); 
 
    this.stopPropagation(); 
 
} 
 

 
var products = document.getElementsByClassName('Wrapper') 
 
var tags = document.getElementsByTagName('a') 
 

 
for (let i = 0; i < products.length; i++) { 
 
    products[i].onclick = function() { 
 
    testMessage(); 
 
    } 
 
} 
 

 
for (let i = 0; i < tags.length; i++) { 
 
    tags[i].onclick = function() { 
 
    anchorClick(); 
 
    } 
 
}

#Wrapper, 
 
#Wrapper2 { 
 
    height: 250px; 
 
    width: 250px; 
 
    background: #fff; 
 
    cursor: pointer; 
 
}

<div class="Wrapper"> 
 
    <a href="#" class="anchor">Link1</a> 
 
    <a href="#" class="anchor">Link2</a> 
 
    <a href="#" class="anchor">Link3</a> 
 
</div> 
 

 
<div class="Wrapper"> 
 
    <a href="#" class="anchor">Link1</a> 
 
    <a href="#" class="anchor">Link2</a> 
 
    <a href="#" class="anchor">Link3</a> 
 
</div>

あなたがアドバイスすることができますしてください？

乾杯 クリス

Answer 1

あなたがwindowを指しthisを使用している、あなたの関数にeventを渡す必要があります。あなたがこれを持っている場合

function testMessage() { 
 
    alert("Here"); 
 
} 
 

 
function anchorClick(e) { 
 
    alert("Anchor"); 
 
    e.stopPropagation(); 
 
} 
 

 
var products = document.getElementsByClassName('Wrapper') 
 
var tags = document.getElementsByTagName('a') 
 

 
for (let i = 0; i < products.length; i++) { 
 
    products[i].onclick = function() { 
 
    testMessage(); 
 
    } 
 
} 
 

 
for (let i = 0; i < tags.length; i++) { 
 
    tags[i].onclick = function(e) { 
 
    anchorClick(e); 
 
    } 
 
}

#Wrapper, 
 
#Wrapper2 { 
 
    height: 250px; 
 
    width: 250px; 
 
    background: #fff; 
 
    cursor: pointer; 
 
}

<div class="Wrapper"> 
 
    <a href="#" class="anchor">Link1</a> 
 
    <a href="#" class="anchor">Link2</a> 
 
    <a href="#" class="anchor">Link3</a> 
 
</div> 
 

 
<div class="Wrapper"> 
 
    <a href="#" class="anchor">Link1</a> 
 
    <a href="#" class="anchor">Link2</a> 
 
    <a href="#" class="anchor">Link3</a> 
 
</div>

ところで、それは、あなたのイベント関数を呼び出すための関数を宣言する必要はありません。

products[i].onclick = function() { 
    testMessage(); 
} 

あなたは直接あなたのtestMessage機能を割り当てることができます。

products[i].onclick = testMessage; 

Answer 2

Uncaught TypeError: this.stopPropagation is not a function

あなたが見ることができるように、thisはyour'reが探しているオブジェクトではありませんが、それはwindow参照です：wserコンソールは、次のエラーを見つけることができます。 *あなたのコードを投稿

function testMessage() { 
 
    console.log("Here"); 
 
} 
 

 
function anchorClick() { 
 
    console.log("'this' references to window: " + this); 
 
    console.log("Anchor"); 
 
    event.stopPropagation(); 
 
} 
 

 
var products = document.getElementsByClassName('Wrapper') 
 
var tags = document.getElementsByTagName('a') 
 

 
for (let i = 0; i < products.length; i++) { 
 
    products[i].onclick = function() { 
 
    testMessage(); 
 
    } 
 
} 
 

 
for (let i = 0; i < tags.length; i++) { 
 
    tags[i].onclick = function() { 
 
    anchorClick(); 
 
    } 
 
}

#Wrapper, 
 
#Wrapper2 { 
 
    height: 250px; 
 
    width: 250px; 
 
    background: #fff; 
 
    cursor: pointer; 
 
}

<div class="Wrapper"> 
 
    <a href="#" class="anchor">Link1</a> 
 
    <a href="#" class="anchor">Link2</a> 
 
    <a href="#" class="anchor">Link3</a> 
 
</div> 
 

 
<div class="Wrapper"> 
 
    <a href="#" class="anchor">Link1</a> 
 
    <a href="#" class="anchor">Link2</a> 
 
    <a href="#" class="anchor">Link3</a> 
 
</div>