时间戳

首页 > 解决方案 > JavaScript中同时发生两个事件，单击事件处理程序未执行

javascript - JavaScript中同时发生两个事件，单击事件处理程序未执行

问题描述

我有以下事件监听器

element2.addEventListener("focusout", hideDropdown);
element3.addEventListener("click", addSelectedOption);

当我点击时element3，只有function1被调用，但我希望两者都被调用，因为点击element3也意味着element2失去焦点。

当我删除第一个事件侦听器时，第二个就可以了。为什么会这样？我怎样才能绕过它？

这是代码：

<!DOCTYPE html>
<html>
<header>

<style>
    #element3 {
        display: none;
    }
</style>
</header>

<body>
<label>Multi Select</label>
<div id="element1">
    <p id="element2" contenteditable="true">Select required competencies</p>
</div>
<div id="element3" class="auto-complete-select-dropdown">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
    <p>Four</p>
</div>

<script>

    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("click", 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) {
        alert("here");
        element = event.target;
        var element1 = document.getElementById("element1");
        var p = document.createElement('p');
        p.textContent = element.textContent.trim();
    }
</script>
</body>
</html>

标签： javascriptaddeventlistener

解决方案

当用户在其他元素上按下鼠标按钮时触发该focusout事件。当用户在某个元素上释放鼠标按钮时触发该事件。所以，问题是在事件触发之前触发事件。在侦听器中，'s被设置为- 它被隐藏，这意味着当用户释放鼠标按钮时，它在几毫秒后无法点击。clickfocusoutelement2clickelement3focusoutelement3displaynone

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

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

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;
}
<label for="requiredCompetencies">Required Competencies</label>
<div id="element1">
  <p id="element2" contenteditable="true">Select required competencies</p>
</div>
<div id="element3" class="auto-complete-select-dropdown">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
</div>

推荐阅读