Javascript 排除addEventListener上的DOM区域_Javascript

Javascript 排除addEventListener上的DOM区域

javascript

Javascript 排除addEventListener上的DOM区域,javascript,Javascript,我想有一个事件触发时，点击一个框，和一个不同的事件时，点击任何地方不该框。代码如下： <body> <p id="demo"></p> <script> document.querySelector("#demo").addEventListener("mouseover", funcion); document.querySelector("#demo").addEventListener("cli

我想有一个事件触发时，点击一个框，和一个不同的事件时，点击任何地方不该框。代码如下：

<body>
    <p id="demo"></p>
    <script>
        document.querySelector("#demo").addEventListener("mouseover", funcion);
        document.querySelector("#demo").addEventListener("click", funcion2);
        document.querySelector("#demo").addEventListener("mouseout", funcion3);
        document.body.querySelector("#demo").addEventListener("click", funcion4, false);
        function funcion() {
            document.getElementById("demo").innerHTML += "Mouse encima!<br>";
        }
        function funcion2() {
            document.getElementById("demo").innerHTML += "Click dentro<br>";
        }
        function funcion3() {
            document.getElementById("demo").innerHTML += "Mouse fuera!<br>";
        }
        function funcion4() {
            document.getElementById("demo").innerHTML += "Click fuera<br>";
        }
        document.querySelector("#demo").addEventListener("click", function(e) {e.stopPropagation();}, true);
    </script>
</body>

从技术上讲，这应该可以解决这个问题，尽管我得到了我正在寻找的相反的解决方案，但当单击框时，它会触发两个事件输入和输出，而当单击框时，不会触发任何事件。我没有主意了。

您可以将事件侦听器添加到文档本身，并从中检测事件的真正目标

var-box=document.getElementById'demo'； document.addEventListener'click'，函数E{ 如果e.target==框{ 控制台。记录“点击方框”； }否则{ 控制台。记录“点击框外”； } }; 这是盒子