Javascript: condition on 'change' handler can stop other event propagation?-CodePudding

I have a 'onChange' event on a text field, that check some condition.

<html>
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        </head>
        <body>
            <div >                
                <input id="txt"/>
                <button id="btn">Click me</button>
            </div>
        <script>
            $(document).ready(function() {
                $('#txt').on('change', (ev) => {                    
                    if ($(ev.target).val() == "stop") {                     
                        console.warn("Wrong condition, I want to avoid the click event on button");
                        alert("Wrong condition, no click on button");                       
                    } else {
                        console.log("Condition OK!");
                    }                   
                });
                
                $('#btn').on('click', (e) => {                  
                    console.log("Button pressed");                  
                });
                
                
            });

        </script>
        </body>
    </html>

What I like to have is that, when I type 'stop' on the field and then click the button, the button's click triggers the onChange and the onChange event should prevent the click event execution. With the alert() this works, but I want it works without the alert() too. Is it possible?

CodePudding user response：

This will prevent the button from being executing the event. The button can still be pressed, but it will execute a different function / process. I like js for this reason, we can very easily change what things do.

var btn = document.getElementById('btn');

$('#txt').on('change', (ev) => {
  if ($(ev.target).val() == "stop") {
    // condition met, do not enable the button onclick handler!
    btn.onclick = (e)=>alert('non standard event');
    
    console.warn("Wrong condition, I want to avoid the click event on button");
    alert("Wrong condition, no click on button");
  } else {
    // it's ok, do the thing!
    if ( btn.onclick == clickHandler) return;
    btn.onclick = clickHandler;
  }
});

function clickHandler(e) {
  console.log('Button Pressed!');
}

btn.onclick = clickHandler;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="txt" />
<button id="btn">Click me</button>

CodePudding user response：

Yes, it is possible to prevent the button's click event execution without using an alert().

Instead of using an alert, you can use the preventDefault() method to prevent the default action of the button's click event.

<html>
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        </head>
        <body>
            <div >                
                <input id="txt"/>
                <button id="btn">Click me</button>
            </div>
        <script>
            $(document).ready(function() {
                $('#txt').on('change', (ev) => {                    
                    if ($(ev.target).val() == "stop") {                     
                        console.warn("Wrong condition, I want to avoid the click event on button");
                    } else {
                        console.log("Condition OK!");
                    }                   
                });
                
                $('#btn').on('click', (e) => {
                    if ($(e.target).val() == "stop") {                     
                        e.preventDefault();
                        console.warn("Wrong condition, I want to avoid the click event on button");
                    } else {
                        console.log("Button pressed");                  
                    }  
                });
                
                
            });

        </script>
        </body>
    </html>