JavaScript - 停止冒泡

Question

我想知道是否有人可以看看下面的JS我需要幫助嗎？我想要發生的事情是能夠點擊div並出現警告框「Here」，它就是這樣。我也希望能夠點擊a並顯示「錨點」警報，它會這樣做。

問題是「Here」警告框然後再次出現。我試過使用.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

你必須在event傳遞給你的函數，你正在使用this是指window。

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

如果你檢查兄弟wser控制檯，你會發現以下錯誤：

Uncaught TypeError: this.stopPropagation is not a function

正如你所看到的，this是不是您需要的信息的對象，但它的window參考。

stopPropagation()是event對象的一個​​方法，see documentation here

見例如：

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>