检查是否在 Div 区域内单击事件

Question

我有一个弹出菜单，当用户名悬停在使用onmouseeneter时出现，当菜单被触发时，菜单会消失。

我遇到的问题是有时不会触发鼠标离开并且菜单保持显示，这没关系，但我需要再次检查鼠标是否在鼠标移动时的div 内。 还有一个单击事件，用于在单击在div 之外关闭div。

如何检查天气点击或鼠标移动是否在div 内。

我已经尝试了以下方法，但没有运气。 虽然代码很好，但我需要另一种方式。

<div id='overlay' class='overlay' style='display:none;' 
onmouseover='showoverlay();' onmouseleave='removeoverlay();'> </div>

function showoverlay() {
    var overlay=document.getElementById("overlay"); 
    overlay.style.display="block";
    overlay.style.zIndex="999";     
    overlay.style.opacity="1";
}
function removeoverlay() {
    var overlay = document.getElementById("overlay");
    overlay.style.opacity="0";
    overlay.style.display="none"
    overlay.style.zIndex="-999";                
}

$(document).ready(function(){
    $(document).mouse(function(e)
    {
      var subject = $("#overlay"); 
        if(e.target.id != subject.attr('id') && 
        !subject.has(e.target).length)
       {
        removeoverlay();
       }
    });
});

Answer 1

你可以

像这样使用jQuery函数：

$(function() {
    $('ul').on('click', function (event) {
        let target = $(event.target);
        let handle = $(this).find('i');
        let checkbox = $(this).find('input[type=checkbox]');
        if (false === target.is(handle) && false === target.is(checkbox)) {
            checkbox.prop('checked', !checkbox.prop('checked'));
        }
    });
});