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>