Остановить выполнение события клика по JavaScript, если условие выполнено

Question

Я пытаюсь остановить выполнение обработчика событий javascript, когда выполняется какое-то условие, и мой код выглядит так:

 $(".save").click(function (event) {
            $(".loader").fadeIn(300);

            var statusValue = $("#status").val();
            console.log(statusValue);

            if (statusValue == null || statusValue == '') {
                $("#status").css({
                    "border-color": "red",
                    "border-width": "1px",
                    "border-style": "solid"
                });
                event.preventDefault();
                console.log("NOT EXECUTED");
            }

            console.log("EXECUTED");
// .. some more code
}

Когда я проверяю консоль, я получаю следующие результаты:

пустой

1008 * нуль *

НЕ ВЫПОЛНЕНО

ИСПОЛНЕНО

Так мне интересно, как получилось? If == null условие выполнено, не должен ли event.preventDefault() остановить это .click событие от исполнения до конца?

Я пытаюсь добиться, если ничего не выделено, а затем предотвратить выполнение, мой выбор выглядит следующим образом:

<select class="form-control" id="status">
        <option value="Done">Done</option>
        <option value="Complited">Completed</option>
        <option value="Cancel">Cancel</option>
</select>

Answer 1

Чтобы остановить это, используйте это:

throw new Error("Something went badly wrong!");

Источник: https://stackoverflow.com/a/9298915/4110122

Answer 2

Нет, event.preventDefault() не делает то, что вы думаете, в этом случае, если вы хотите остановить выполнение функции, вы можете просто пустым return; в конце блока if. Другое решение - поставить блок else.

event.preventDefault() предотвращает выполнение действия по умолчанию, например, если вы установите его на <a>link</a>, оно не будет перенаправлено на href, потому что по умолчанию щелчок на a - это перенаправить страницу на путь по href prop. Пример . * * 1014

Answer 3

event.preventDefault() не работает в вашем случае, используйте return; вместо

$(".save").click(function (event) {

    if (true) {
      console.log("EXECUTED");
      return;
      console.log("NOT EXECUTED");
    }

    console.log("NOT EXECUTED");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <button class="save">Save</button>
</div>

Answer 4

Событие уже происходит. Вы можете использовать это:

 $('form').attr('onsubmit', 'return false;');