停止焦点事件添加 stopPropagation 方法问题答案

【问题标题】：Stop focus event adding the stopPropagation method issue停止焦点事件添加 stopPropagation 方法问题
【发布时间】：2019-08-12 15:23:14
【问题描述】：

当我专注于这个文本栏时，我只想显示一个警报，我正在使用 JS stop.Propagation() 方法来停止事件侦听器，这似乎不起作用，我也想避免添加html 属性“onFocus=''”。谢谢你。

const textbar = document.querySelector('#search');

textbar.addEventListener('focus', (event) => {
  alert("hi");
  event.stopPropagation();
});

        &lt;input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" /&gt;

【问题讨论】：

e.stopPropagation() 不会“停止”事件监听器。它可以防止事件在 DOM 树中冒泡。

标签： javascript

【解决方案1】：

您可以尝试使用布尔变量来实现。 ~~不确定它是否会像您希望的那样为下一个焦点工作（在您离开输入并再次聚焦之后）。~~

const textbar = document.querySelector('#search');
let focused = false

textbar.addEventListener('focus', (event) => {
  if(!focused) {
    alert("hi");
    focused=true
  } else {
    focused=false
  }
});

&lt;input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" /&gt;

【讨论】：

谢谢，它可以工作，但是当你点击文本框后重新聚焦时它不会重新打开警报，我应该让事件变为点击吗？
谢谢先生，不胜感激:)