Javascript：“更改”处理程序的条件可以停止其他事件传播吗？

Question

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

 $(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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container">                 <input id="txt"/> <button id="btn">Click me</button> </div>

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?

Answer 1

Switching the text-field and button validation-handling from a 'change' to an 'input' event does support a brute force approach which disables/enables the button upon the OP's condition. The latter btw got changed to from the value having to equal 'stop' to a value that just has to contain/include the substring 'stop' regardless of its letter-casing.

 $(document).ready(function() { //... switching from 'change' to 'input' event // does support the following brute force approach... $('#txt').on('input', (ev) => { if ($(ev.target).val().toLowerCase().includes("stop")) { // "Wrong condition, I want to avoid the click event on button" //... disabling the button is one possible way... $('#btn')[0].disabled = true; } else { $('#btn')[0].disabled = false; } }); $('#btn').on('click', (e) => { console.log("Button pressed"); }); });

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

A proper generic implementation of the above approach and code into vanilla JS then might look as follows...

 function handleComponentButtonClick(evt) { const elmButton = evt.currentTarget; const elmInput = elmButton.previousElementSibling; console.log({ currentClickRelatedValue: elmInput.value }); } function handleComponentButtonState(evt) { const elmInput = evt.currentTarget; const elmButton = elmInput.nextElementSibling; elmButton.disabled = elmInput.value.toLowerCase().includes('stop'); } function enableInputAndButtonComponentBehavior(elmButton) { const elmInput = elmButton.previousElementSibling; elmInput.addEventListener('input', handleComponentButtonState); elmButton.addEventListener('click', handleComponentButtonClick); } function main() { document.querySelectorAll('.container [type="text"] + button').forEach(enableInputAndButtonComponentBehavior); } main();

 .container { float: left; margin: 0 20px; }

 <div class="container"> <input type="text" /> <button>Click me</button> </div> <div class="container"> <input type="text" /> <button>Click me</button> </div>