Остановка событий, чтобы пузыриться в DOM

Question

Я пишу HTML-редактор, любой может подключить этот плагин к своему сайту и использовать его.

Plugin Использование

$(".editable").htmleditor(); 

OnClick на этом элементы я изменю элемент в contenteditable и мое меню редактора будет открыт возле элемента, как редактор Алоха.

Проблема

Сценарий 1

<div class='editable' onclick='loadUrl('https://facebook.com')'> 
</div> 

Сценарий 2

<div class='editable' id='openNewWindow'></div> 
<script> 
    $("#openNewWindow").click(function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 
</script> 

Вышеупомянутая сценарии я не буду получать событие. Это делает мой плагин не надежным. Я попробовал пару решений.

Solutions Я попытался

1. Удалены все элементы в теле и снова повторно в него, чтобы удалить прикрепленные обработчики событий. Он работает, но пользовательский интерфейс искажается при вставке на некоторые сайты.

2. onclick='return false' атрибут во всех элементах. Он работает только для некоторых элементов.

Как отвязать все прикрепленные обработчики событий и предотвратить событие по умолчанию для элемента?

Answer 1

В Сценарии 1 пользователь вашего плагина сделал элемент редактируемым, а также нажал на него, переместившись от текущей страницы. Это не имеет особого смысла, но это их бизнес. В этой ситуации они не могут реально ожидать, что ваш плагин будет запущен.

В Сценарии 2 вам необходимо обработать событие click, прежде чем оно будет обработано в другом месте. Удаление или подавление существующих обработчиков не является хорошей идеей: это может привести к сбою других частей страницы и в любом случае раздражает ваших пользователей.

Вместо этого, вы можете сделать ваш обработчик запуска в фазе захвата события, как это:

editableElement.addEventLister("click", myHandler, true); // note the "true" 

Теперь ваш обработчик будет работать, прежде чем все обработчики, добавленные с помощью JQuery (и большинство обработчиков, которые люди добавляют с помощью любых средств), которые работают в фазе пузырьков события. Обратите внимание, что этот метод работает только в современных браузерах (т. Е. Не IE < 9).

Справочно: What is event bubbling and capturing?