Как скрыть контекстное меню при нажатии за пределами JS?

Question

У меня есть контекстное меню, которое открывается при нажатии на любой узел в этом сетевом графике.И я пытаюсь закрыть контекстное меню, щелкая где-либо за пределами, используя Javascript.

Я пытался скрыть его, используя document.onclick ", но он не работает.

Пожалуйста, обратитесь к ссылке jsfiddle дляфрагмент кода.

Контекстное меню должно быть закрыто при щелчке снаружи.

jsfiddle

<div id="contextMenuId" style="display: none" class="contextMenu">
    <div id="contextMenuItem1" class="sublot">menu1</div>
    <div id="contextMenuItem2">menu2</div>
</div>

plotOptions: {
        series: {
            cursor: 'pointer',
            events: {
                click: function (event) {  
                    let contextMenu = document.getElementById('contextMenuId');
                    contextMenu.onclick = function() {
                      contextMenu.classList.add("contextMenu"); 
                    }
                    /* document.onclick = function() {
                      contextMenu.style.display = 'none';
                    } */
                    contextMenu.setAttribute('style', 'top: ' + event.pageY + 'px; left:'
                      + event.pageX + 'px;');
                }
            }
        },
        networkgraph: {
            keys: ['from', 'to'],
            layoutAlgorithm: {
                enableSimulation: true,
                friction: -0.9
            }
        }
    },

Answer 1

Добавьте прослушиватель щелчков к документу и попробуйте проверить, щелкается ли он внутри элемента контейнера или снаружи.Если щелкнуть внутри, ближайший метод вернет родительский контейнер (он даст вам элемент контейнера), в противном случае, если щелкнуть мышью снаружи, он даст ноль.Нас интересует ноль (щелкнув снаружи), тогда мы скрываем контекстное меню div

document.addEventListener('click', function(e){
  let inside = (e.target.closest('#container'));
  if(!inside){
    let contextMenu = document.getElementById('contextMenuId');
    contextMenu.setAttribute('style', 'display:none');
  }
});

Если вам нужно установить границу, отличную от этой, просто замените #container на что-нибудь подходящее.

Немногие браузеры пока не поддерживают ближайший, если вы не используете jQuery, убедитесь, что вы используете функцию pollyfill для ближайшей функции https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Обновленная скрипта https://jsfiddle.net/28tvp30b/

ПРИМЕЧАНИЕ: ваш элемент контейнерапочти занимает всю страницу, трудно щелкнуть за пределами контейнера.Проверьте, действительно ли вы нажимаете за пределами элемента контейнера.