Question

Javascript 阻止函数调用

2020-01-19

46

javascript

function alertOuter() {
  alert("outer alert")
}

function alertInner() {
  alert("inner alert")
  return
}

<div onclick="alertOuter()" style="padding:20px;background:red;">
  <h1>Outer</h1>
  <br/>
  <button onclick="alertInner()">Inner</button>
</div>

我在 onclick 事件中调用了两个函数。

我想在单击按钮时阻止 alertOuter 函数。但是，当我单击按钮时，它会调用这两个函数。

我想在单击按钮时阻止 alertOuter 函数，只想调用 alertInner() 函数

我该怎么做？

Answer 1

使用 Javascript 正确附加事件监听器，以便您可以看到事件参数，然后在事件上调用 stopPropagation() ，这样它就不会冒泡到包含的 <div> :

document.querySelector('button').addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('inner');
});
document.querySelector('div').addEventListener('click', () => {
  console.log('outer');
});

<div style="padding:20px;background:red;">
  <h1>Outer</h1>
  <br/>
  <button>Inner</button>
</div>

最好避免使用内联处理程序，它们的行为令人困惑，需要全局污染，并且几乎从来不需要。

Answer 2

我通常喜欢使用内联 onclick 调用，就像您所做的那样。我发现它更容易、更清晰地跟踪，而且我对此没有任何问题。以下是您以这种方式使用 stopPropagation 的方法：

div{
  background:red;
  padding:20px;
}

<div onclick="alert('outer');">
  <button onclick="event.stopPropagation();alert('inner');">Click me for inner</button>
</div>