Question

我有以下事件监听器

Foo[]

当我单击element2.addEventListener("focusout", hideDropdown); element3.addEventListener("click", addSelectedOption);时，只有element3被调用，但是由于单击function1也意味着element3失去了焦点，我希望两者都被调用。

当我删除第一个事件侦听器时，第二个侦听器起作用。为什么会这样呢？以及如何解决呢？

代码如下：

element2

Answer 1

当用户按下其他元素上的鼠标按钮时，将触发focusout事件。当用户松开某个元素上的鼠标按钮时，将触发click事件。因此，问题在于focusout上的element2事件在click上触发element3事件之前触发。在focusout侦听器中，element3的{{1}}设置为display-它被隐藏了，这意味着在用户释放鼠标按钮后数毫秒之内不可单击。

即使用户试图单击它，也可能在none事件触发之前从focusout事件中隐藏该元素，因此click处理程序将永远不会运行。

一种选择是向click添加一个mousedown侦听器，该侦听器将与element3事件（同步）同时触发。在处理mousedown事件之前，浏览器没有时间重新绘制页面）：

focusout

element3.addEventListener("mousedown", addSelectedOption);

var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var element3 = document.getElementById("element3");

element2.addEventListener("keyup", showDropdown);
element2.addEventListener("focusout", hideDropdown);
element3.addEventListener("mousedown", addSelectedOption);

function showDropdown() {
  var element = document.getElementById("element3");
  if (element.style.display != "block")
    element.style.display = "block";
}

function hideDropdown() {
  var element = document.getElementById("element3");
  if (element.style.display != "none")
    element.style.display = "none";
}


function addSelectedOption(event) {
  console.log('adding selected option');
  element = event.target;
  var element1 = document.getElementById("element1");
  var p = document.createElement('p');
  p.textContent = element.textContent.trim();
}

#element3 {
  display: none;
}

JavaScript中同时存在两个事件，单击事件处理程序未执行

1 个答案: