Скрыть элемент во всех событиях щелчка, даже когда щелкает элемент, у которого есть stopPropagation

Question

У меня есть элемент, который мне нужно скрыть при нажатии в любом месте страницы, даже на элементах, которые имеют e.stopPropagation().

Я пробовал

$(document).on("click",function(){
    $("#mydiv").hide();
});

, который работает, ноне работает с элементом, который имеет следующее:

$(document).on("click","#someDiv",function(e){
    e.stopPropagation();
});

Как я могу скрыть свой элемент даже на #someDiv, не удаляя stopPropagation. Мне нужна гибкость, потому что я пишу плагин, который может использовать каждый, и не будет ничего знать о событиях щелчка или идентификаторах элементов на странице.

Есть ли способ привязать мойскрытие элемента на все клики? Доволен решением JS или jQuery.

Я знаю, что это возможно, поскольку я видел, что другие плагины делают это.

Заранее спасибо за любые предложения!

Answer 1

Вы можете сделать что-то вроде добавления дополнительного EventListener ко всем элементам на своей странице, используя

$('*').each( () => { 
 $(this).on("click", () => { 
  /* hide your div here */ 
 }) 
};

Answer 2

Вероятно, самым быстрым и наиболее совместимым решением с вашим существующим кодом является замена скрывающего слушателя #mydiv для использования ванильного JS addEventListener с использованием необязательного третьего аргумента useCapture для захвата событиядо того, как какие-либо внутренние элементы получили шанс у своих слушателей выстрелить. Смотрите это в действии во фрагменте ниже:

document.addEventListener("click",function(){
    $("#mydiv").hide();
}, true);

$("#someDiv").on("click",function(e){
    console.log('some div clicked!');
    e.stopPropagation();
});

.container {
  height: 100vh;
  width: 100vw;
  background-color: pink;
}

#mydiv {
  background-color: cyan;
}

#someDiv {
  background-color: lavender;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="mydiv">Hide me!</div>
  <div id="someDiv">I'll stop propagation!</div>
</div>