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

Question

我有以下活动监听器

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>

Answer 1

当用户在其他元素上按下鼠标按钮时，触发focusout事件。 当用户在某个元素上释放鼠标按钮时，将触发click事件。 因此，问题在于在focusout上的click事件触发之前， element2上的element3事件触发。 在focusout监听， element3的display设置为none -它被隐藏，这意味着当用户释放鼠标按键是无法点击几毫秒后。

即使用户想一下就可以了，元素从隐藏focusout事件之前的click事件可能触发的，所以click处理程序从未运行。

一种选择是向element3添加mousedown侦听element3 ，该侦听器将与focusout事件同时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>

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

问题描述

1 个解决方案

解决方案1
4 已采纳 2018-10-28 07:49:23

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2018-10-28 07:49:23

解决方案1
4 已采纳 2018-10-28 07:49:23