javascript - Javascript如何检查我的鼠标是否不在元素中以及其中的所有内容

Question

假设我有这个代码：

<div id="check-div">
    <span>
        <!-- Can be some inside elements here too -->
    </span>

    <!-- Can be more elements here as well ... -->
</div>

如何检查我是否在 div 之外check-div以及其中的所有内容？

因此，例如，如果我的鼠标位于<span>内部或内部的其他任何东西上，代码将不会处于活动状态？

标签： javascripthtml

Answer 1

您可以尝试使用mouseleave事件：

mouseleave当指针设备（通常是鼠标）的光标移出元素时，该事件会在元素上触发。

演示：

var el = document.querySelector('#check-div');
el.addEventListener("mouseleave", function( event ) {   
  // highlight the mouseleave target
  event.target.style.color = "red";

  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);

<div id="check-div">
    <span>
        Can be some inside elements here too 
    </span>
    <br/>
    Can be more elements here as well ...
</div>