Почему одно событие перекрывает другое?

Question

[Александр]

Нужно сделать функционал как у рабочего стола Windows.
Есть одно меню, которое всплывает по правому клику мыши, на oncontextmenu. По клику левой кнопки мыши, оно должно исчезать. Вот с этим то и проблемы. Основная область экрана - это подобие рабочего стола, которое в jquery указано как selectable() . Т.е. по клику в любом другом месте - меню действительно исчезает, но на рабочем столе по клику появляется рамка выделения и клик не проходит. Клик назначаю через addEventListener

ВОт примерный код:

$(document).ready(function(){
    $('#window').selectable();
});

document.oncontextmenu = function(event){
    var target = event.target;
    var menu = document.getElementById('contextMenu');
    menu.style.display = 'block';
    menu.style.top = event.pageY + 'px';
    menu.style.left = event.pageX + 'px';
    return false;
}

document.addEventListener('click', function(e){
    var target = e.target;
    document.getElementById('contextMenu').style.display = 'none';
});

Answer 1

[Дмитрий Ковальский]

Может дело в коде, который создает рамку выделения? Тем более вы вызываете обработчик события, при этом никак не контролируете "всплытие пузырька", соответственно любые события,возникающие при данном действии так же отрабатывают. Если говорить о вашей задаче - мне кажется тут вы не совсем точно ее решаете. Мне кажется тут больше подходит идея о клике вне элемента - вот пример

Comments

[Александр]

Тот пример дает точно такой же результат как и у меня вышеприведеный.
Видимо действительно дело в .selectable()

Answer 2

[Константин Громов]

В коде плагина где-то используется event.stopPropagation, потому ваш обработчик и игнорируется. Вы можете передать в addEventListener третьим аргументом true. Тогда он выполниться раньше события плагина. Но ваш код всё-равно будет работать неверно потому, что он скрывает меню при клике куда угодно, даже на само меню. И вам надо обработать эту ситуацию (здесь немного про другое, но код применим для этой задачи).

Comments

[Александр]

Т.е. вот это
document.addEventListener('click', function(e){
var target = e.target;
document.getElementById('contextMenu').style.display = 'none';
});

Надо заменить на

document.addEventListener("click", function(event) {
if (!$(event.target).closest("#contextMenu").length) {
document.getElementById('contextMenu').style.display = 'none';
}
}, true);

По правде говоря, у меня не сработало

[Константин Громов]

Александр: https://jsfiddle.net/vLg9whth/ здесь всё работает, чтобы разобрать вашу ситуацию нужен весь код.