在addEventListener中排除DOM的區域

我希望在點擊一個框時觸發一個事件，而在小於該框的任何地方單擊時觸發另一個事件。下面的代碼：在addEventListener中排除DOM的區域

<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>

「Tecnically」應該解決它，但我得到我找了反向解決方案，它同時觸發事件（在&出）點擊框上方時，並沒有任何的事件點擊它時。我沒有想法。

來源

2017-05-26 Stephan

您可以將事件偵聽器添加到document本身，並從那裏檢測事件的真實目標。

var box = document.getElementById('demo'); 
 

 
document.addEventListener('click', function(e) { 
 
    if (e.target === box) { 
 
    console.log('Clicking on the box'); 
 
    } else { 
 
    console.log('Clicking outside of the box'); 
 
    } 
 
});

<p id="demo">This is the box!</p>

來源

2017-05-26 07:51:33

在addEventListener中排除DOM的區域

回答

相關問題