时间戳

首页 > 解决方案 > Javascript阻止函数调用

javascript - 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()函数

我怎样才能做到这一点？

标签： javascript

解决方案

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

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

推荐阅读