Отключение сквозных событий Javascript при работе с элементами HTML в z-порядке

Question

У меня есть глупая (и, надеюсь, легко решаемая) проблема, которую я сейчас попытаюсь описать.

Сценарий -> Я пытаюсь создать контекстное меню, используя HTML / CSS / JS. Просто DIV с высоким z-порядком, который появляется там, где пользователь щелкает правой кнопкой мыши. Просто, и эта часть работает. Часть, которая не является моей попыткой заставить меню исчезнуть, если пользователь щелкает где-то, где контекстное меню не поддерживается; Я пытаюсь достичь этой цели с помощью общей функции в теге BODY, которая запускается по щелчку. Поскольку тегу BODY присваивается z-порядок -1, а любым другим тегам, которые могут вызвать появление контекстного меню, присваивается более высокое значение z-порядка, я надеялся, что если щелкнуть правой кнопкой мыши элемент с z- порядка, скажем, 3, тогда будет запущена функция showMenu (); вместо этого кажется, что он делает это, а также передает событие в базовый тег BODY, что заставляет меню снова стать скрытым.

Как вы можете себе представить, это невероятно расстраивает. Кто-нибудь знает, как сделать так, чтобы события не передавались? (Кнопка INPUT - это то, на что вы, возможно, захотите взглянуть, якорь A - это нечто похожее, но пока не запрограммированное для работы).

Вот код HTML:

http://pastebin.com/YeTxdHYq

А вот мой CSS-файл:

http://pastebin.com/5hNjF99p

Похоже, это проблема IE, Firefox и Chrome.

Answer 1

Множество DOM-событий «пузырится» от нижнего объекта через контейнерные объекты, что означает, что они в конечном итоге достигнут тела. Но вы можете это прекратить - попробуйте добавить следующий код в обработчик кликов вашего элемента:

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

... где e - это переменная, уже имеющаяся в вашей функции, представляющая объект события.

event.stopPropagation(); должен работать в современных браузерах, но старый способ IE был event.cancelBubble = true; - для безопасности вы можете просто сделать и то, и другое (но, как показано выше, проверьте, что .stopPropagation определено перед попыткой его вызова).

При добавлении приведенного выше кода, если вы щелкнете по элементу, ваша функция не позволит объектам контейнера (включая тело) видеть щелчок. Если вы щелкаете где-то еще, ваша функция не вызывается, поэтому тело будет обрабатывать щелчок.

Подробнее об этом можно узнать по MDN и QuirksMode.org .

Примечание: я проигнорировал проблему z-порядка, потому что в этом случае я думаю, что это не проблема - все элементы являются потомками тела, поэтому (если вы не остановите его), я ожидаю, что события будут пузыриться в теле независимо от z-порядка.