Проверьте, находится ли внутри области Div событие onclick - PullRequest
Новая
       35

Проверьте, находится ли внутри области Div событие onclick

0 голосов
/ 06 июня 2019

У меня есть всплывающее меню, которое появляется, когда имя пользователя наведено с помощью onmouseeneter, и меню исчезает при запуске onmouseleave.

Проблема, с которой я столкнулся, заключается в том, что иногда отпуск мышью не срабатывает, и меню продолжает отображаться, что нормально, но мне требуется еще одна проверка, чтобы увидеть, находится ли мышь в элементе 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();
       }

    });

});

1 Ответ

0 голосов
/ 06 июня 2019

Вы можете использовать is 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'));
        }
    });
});
...