Question

我想知道是否有人可以看一下我需要帮助的以下JS？我想要发生的是能够点击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>

{{1}}

请你指教一下吗？

干杯克里斯

Answer 1

您必须将event传递给您的函数，您使用this引用window。

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

顺便说一下，如果你有这个函数，没有必要声明一个调用你的事件函数的函数：

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

您可以直接指定testMessage功能：

products[i].onclick = testMessage;

Answer 2

如果您检查浏览器控制台，则会发现以下错误：

未捕获的TypeError：this.stopPropagation不是函数

正如您所看到的，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>

JavaScript - 停止冒泡

2 个答案: