Остановить выполнение события щелчка Javascript, если условие выполнено
Я пытаюсь остановить выполнение обработчика событий Javascript, когда выполняется какое-то условие, и мой код выглядит так:
$(".save").click(function (event) {
$(".loader").fadeIn(300);
var statusValue = $("#status").val();
console.info(statusValue);
if (statusValue == null || statusValue == '') {
$("#status").css({
"border-color": "red",
"border-width": "1px",
"border-style": "solid"
});
event.preventDefault();
console.info("NOT EXECUTED");
}
console.info("EXECUTED");
// .. some more code
}
Когда я проверяю консоль, я получаю такие результаты:
null
null
NOT EXECUTED
EXECUTED
Итак, мне интересно, как же так?
Условие 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>
В вашем выборе по умолчанию выбрано "Готово".
event.preventDefault() так не работает. прочтите это для получения дополнительной информации, developer.mozilla.org/en-US/docs/Web/API/Event/preventDefaul t
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Событие уже происходит. Вы можете использовать это:
$('form').attr('onsubmit', 'return false;');
Нет, event.preventDefault() не делает то, что вы думаете, в этом случае, если вы хотите остановить выполнение функции, вы можете просто оставить пустой return; в конце блока if. Другое решение - поставить блок else.
event.preventDefault() предотвращает выполнение действия по умолчанию, например, если вы поместите его на <a>link</a>, он не будет перенаправлять на href, потому что по умолчанию щелчок на a перенаправляет страницу на путь на href prop. Пример.
event.preventDefault() не работает в вашем случае, используйте вместо него return;
$(".save").click(function (event) {
if (true) {
console.info("EXECUTED");
return;
console.info("NOT EXECUTED");
}
console.info("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>Чтобы остановить это, используйте это:
throw new Error("Something went badly wrong!");
Я не думаю, что
event.preventDefault()делает то, что вы думаете