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

Question

我在文本字段上有一个“onChange”事件，用于检查某些条件。

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

我喜欢的是，当我在字段上键入“停止”然后单击按钮时，按钮的单击会触发 onChange 并且 onChange 事件应该会阻止单击事件的执行。 使用 alert() 可以工作，但我希望它也可以在没有 alert() 的情况下工作。 是否可以？

Answer 1

将文本字段和按钮验证处理从'change'事件切换到'input'事件确实支持一种蛮力方法，该方法根据 OP 的条件禁用/启用按钮。 顺便说一句，后者从必须等于'stop'的值更改为只需包含/包括 substring 'stop'的值，而不管其字母大小写如何。

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

上述方法的正确通用实现和代码到 vanilla JS 可能如下所示......

 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>