Как остановить распространение событий?

Question

Я понимаю, что мне нужно использовать stopPropigation, но как мне получить ссылку на событие из функции onClick. И также как узнать, как событие было привязано к элементу. Так что у меня есть простая кнопка, как это:

<button class="btn btn-default" onclick="addRoleToReportClicked()"> 

функция выглядит следующим образом:

function addRoleToReportClicked() { 
    $('#addRoleDiv').show(); 
} 

так просто. И работал нормально. Unitl Я только что обновил код с работы. Теперь он показывает div, но затем переходит к другим вещам, а именно к повторной загрузке всей страницы.

Я использую firefox, и я вижу, что кнопка теперь имеет обработчики событий «bubbling» и «DOM0». Я хотел бы знать, как это есть, но что более важно 2 вопроса:

1. Как остановить это в функции addRoleToReportClicked()? (Я предполагаю, что я могу stopPropogation, но как я могу получить дескриптор события?

2. Есть ли легко способ найти то, что код добавления этих обработчиков событий? Я пробовал отладки, но это не покажите мне что-нибудь. Я не хочу, чтобы пройти через 20+ JS файлы и тысячи строк кода, чтобы найти его. Но я хочу, чтобы выследить разработчик и стрелять в него.

UPDATE

Я пробовал:

$("#addRoleDivButton").unbind("click").on("click", function(e){ 
     e.cancelBubble = true; 
     e.stopPropagation(); 
     e.bubbles = false; 
     $('#addRoleDiv').show(); 
    }); 

Ничего из этого не было. Взяв идею представления формы, я заметил, что все остальные кнопки на странице работают нормально, но это было внутри a. Поэтому я изменил тег с «кнопки» на «a», и он отлично работает. Кто-то приложил submit() к каждой кнопке внутри тега формы. Как остановить отправку?

Answer 1

Есть куча способов, вы можете остановить бульканье, наиболее популярные два пути -

остановить распространение -

function addRoleToReportClicked(e) { 
    e.stopPropagation(); 
    $('#addRoleDiv').show(); 
} 

или отвязать другие обработчики -

<button class="btn btn-default btn-1"> 

$(".btn-1").unbind("click").on("click", function(){ 
    $('#addRoleDiv').show(); 
}); 

Answer 2

1) событие передается в качестве аргумента в функции обратного вызова

function addRoleToReportClicked(event) { 
    event.stopPropagation(); 
    $('#addRoleDiv').show(); 
} 

stopPropagation() предотвратит событие из триггерных обратных вызовов на родительских элементов.

Вы можете использовать stopImmediatePropagation() в некоторых случаях: Я оставляю вам, чтобы искать разницу

jquery: stopPropagation vs stopImmediatePropagation

Обратите внимание, что вы можете также/вместо хотите, чтобы предотвратить браузер выполнить свои действия по умолчанию: (например, щелчок по ссылке также откроет ссылку, щелчок по кнопке отправки отправит форму).

В этом случае у вас есть event.preventDefafult()

EDIT:

Обратите внимание, что если addRoleToReportClicked вызывается, потому что у вас есть

<button class="btn btn-default" onclick="addRoleToReportClicked()"> 

Тогда event объект не передается функции

Вы можете удалить onclick.

Тогда, если вам нужно, чтобы поймать нажмите на кнопку использовать Jquery-х on('click')

---

2) Google Chrome (Dev Tools) говорит вам, что событие слушатели прикрепляются к элементу (правой кнопкой мыши и инспектировать элемент).

AFAIK не сообщает вам, где в коде был установлен прослушиватель событий.

Но если вы выполняете глобальный поиск в своих источниках для имени слушателя событий, вы должны его найти.

Answer 3

Поскольку вы не приняли ни одного из приведенных выше ответов, я добавлю это здесь.

function addRoleToReportClicked(event) { 
    $('#addRoleDiv').show(); 
    return false; 
} 

Добавляя return false;, он должен прекратить любые другие функции запуска. Если это или любое другое решение не работает, должно быть что-то еще обновляющее страницу.

Попробуйте и отлаживайте его самостоятельно, используя отладчики chrome or firefox.