Как предотвратить запуск дочернего события в JQuery

Итак, у меня есть кнопка

<input id="expandButton" type="submit" value="Expand" class="loadWindow"/>

У меня есть два обработчика событий.

function confirmContinue() {
     return confirm("Do you want to expand window, might reload some information?");
}

$("input.loadWindow").click(function(event) {
      showProcessingWindow(event);
}

$("#expandButton").click(function(event) {
     var result = confirmContinue();
     if (!result) {
          event.preventDefault();
          event.stopPropagaton();
     }
}

Я хочу предотвратить срабатывание события щелчка input.loadWindow, если они скажут отменить.

Это то, что происходит прямо сейчас. Нажата кнопка --> Подтверждение огня --> Я нажимаю кнопку "Отмена" --> показать окно обработки по-прежнему срабатывает.

Я хочу, чтобы кнопка нажималась --> Подтверждение огня --> я нажимаю кнопку "Отмена" --> ничего не делаю.


javascript events jquery chaining preventdefault
person Chun ping Wang    schedule 01.07.2015    source источник
comment
Почему у вас есть два отдельных обработчика событий для одного и того же элемента? Таким образом, это усложнит дело. Если вы хотите показать подтверждение только для определенного идентификатора, вы можете проверить идентификатор текущего события клика, используя $(this).attr("id")   -  person Amit.rk3    schedule 02.07.2015
comment
скрипт находится в двух разных файлах. Один скрипт loadWindow есть на всех страницах. Другой специфичен только для какой-то страницы.   -  person Chun ping Wang    schedule 02.07.2015
comment
В порядке. Понятно. Я разместил ответ. Это должно работать в этом случае   -  person Amit.rk3    schedule 02.07.2015

Ответы (3)


arrow_upward
2
arrow_downward

Похоже, что в этом случае сработает event.stopImmediatePropagation(). .

$("#expandButton").click(function(event) {
     var result = confirmContinue();
     if (!result) {
          event.preventDefault();
          event.stopImmediatePropagation(); 
     }
}

Демонстрация скрипта http://jsfiddle.net/w2vwn35x /1/

person Amit.rk3    schedule 01.07.2015

arrow_upward
0
arrow_downward

Попробуй это:

$("#expandButton").click(function(event) {
    if(confirm('Do you want to expand window, might reload some information?')){
        // call your function here
    }else{
      return false;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="expandButton" type="submit" value="Expand" class="loadWindow"/>

person Keerthi    schedule 01.07.2015

arrow_upward
0
arrow_downward

В качестве альтернативы используйте флаг.

var doShowWindow = true;
$("#expandButton").click(function(event) {
    var result = confirmContinue();
    if (!result) {
        doShowWindow = false;
    }
});

$("input.loadWindow").click(function(event) {
    if(doShowWindow){  
        alert(1);
    }
    doShowWindow = true;
});

Вот скрипка.

person Dave Salomon    schedule 01.07.2015