Javascript 防止函数调用

Question

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>

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