解决oninput多次调用导致按钮点击触发函数多次执行的问题

Great question! The core issue here is that you're re-binding the click event to your left arrow button every time the onInput() function runs (once per character entered). Each new binding stacks on top of the previous ones, leading to multiple executions when the button is clicked.

Here are the optimal solutions, ordered by simplicity and performance:

1. Separate Event Binding from Input Logic (Best Approach) #

Since your button's click behavior doesn't change with each input, there's no need to re-bind it every time someone types a digit. Instead, bind the click event once when the page loads, and keep your onInput() function focused solely on input-related tasks.

Example Code: #

// Bind the button click event ONCE when the page is ready
document.addEventListener('DOMContentLoaded', function() {
  const leftArrowBtn = document.getElementById('left-arrow-btn');
  leftArrowBtn.addEventListener('click', yourTargetFunction);
});

// Your onInput function only handles input logic
function onInput() {
  // Do input-related tasks here (e.g., validate digit count, update UI)
}

function yourTargetFunction() {
  // This will only run once per button click
  console.log("Target function executed once!");
}

This approach eliminates redundant event bindings entirely, making your code cleaner and more efficient.

2. Unbind Before Rebinding (For Dynamic Scenarios) #

If you must bind the event inside onInput() (e.g., the button is dynamically added to the DOM later), you can remove the existing event listener before adding a new one. This ensures only one binding exists at a time.

Example Code: #

function onInput() {
  const leftArrowBtn = document.getElementById('left-arrow-btn');
  
  // Remove the existing listener first to avoid duplicates
  leftArrowBtn.removeEventListener('click', yourTargetFunction);
  // Add the listener again
  leftArrowBtn.addEventListener('click', yourTargetFunction);
}

function yourTargetFunction() {
  console.log("Target function executed once!");
}

3. Use the once Option (For One-Time Clicks) #

If you only want the button to trigger the function once after each input, you can use the once: true option in addEventListener. This automatically removes the listener after the first click. Note that this is only useful if you need to re-enable the click after each input.

Example Code: #

function onInput() {
  const leftArrowBtn = document.getElementById('left-arrow-btn');
  
  // Remove any leftover listeners first
  leftArrowBtn.removeEventListener('click', yourTargetFunction);
  // Bind with once: true to auto-remove after first click
  leftArrowBtn.addEventListener('click', yourTargetFunction, { once: true });
}

function yourTargetFunction() {
  console.log("Target function executed once!");
}

Final Recommendation #

Stick with Solution 1 whenever possible—it's the most efficient and maintainable approach. It separates concerns, avoids unnecessary event handling overhead, and prevents the multiple-execution problem at its root.

内容的提问来源于stack exchange，提问作者Tom van Meringen