Stop Javascript click event execution if condition is satisfied

Question

I'm trying to stop execution of Javascript event handler when some condition is satisfied, and my code looks like this:

 $(".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
}

When I check console I'm getting results like this:

null
null
NOT EXECUTED
EXECUTED

So I'm wondering how come? If == null condition is satisfied shouldn't event.preventDefault() stop this .click event from execution till end?

I'm trying to achieve, if nothing is selected in then prevent execution, my select looks like this:

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

I don't think `event.preventDefault()` does what you think it does — Luca Kiebel, May 03 '18 at 18:10
`event.preventDefault()` doesn't work like that. read this for more info, https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — bowl0stu, May 03 '18 at 18:23

score 0 · Answer 1 · answered May 03 '18 at 18:20

0

The event is already happening. You can use this:

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

answered May 03 '18 at 18:20

Alana Rodrigues

16
1

score 0 · Answer 2 · answered May 03 '18 at 18:33

No, event.preventDefault() doesn't do what you're thinking, in this case if you want to stop the function execution you can just but a empty return; at the end of the if block. Another solution is put an else block.

event.preventDefault() prevents the default action to happen, for an example, if you put it on a <a>link</a> it won't redirects to the href, because the default of a click on a a is to redirect the page to the path on href prop. Example.

score 0 · Answer 3 · answered May 03 '18 at 18:56

event.preventDefault() does not work in your case, use return; instead

$(".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>

score 0 · Answer 4 · answered May 04 '18 at 11:32

0

To stop it use this:

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

source: https://stackoverflow.com/a/9298915/4110122

answered May 04 '18 at 11:32

Mohamad Hamouday

2,070
23
20

Stop Javascript click event execution if condition is satisfied

4 Answers4