如何将range类型输入的input事件改为change事件以避免多次触发

首先明确核心问题：range 类型输入框的 input 事件会在滑块滑动过程中持续触发，而你需要它仅在滑动结束后执行一次逻辑；同时要保留 number 输入框的实时响应能力。

方案一：针对不同输入类型分开绑定事件 #

直接给两类输入框绑定对应事件，避免事件委托带来的混淆，同时同步两类输入框的数值：

// 处理number输入框的实时输入
$('body').on('input', '#box-filter form[name="filter_form"] input[type="number"]', function(e) {
  const $input = $(this);
  // 同步对应range滑块的值
  if ($input.hasClass('min-input')) {
    $('.range-line-min').val($input.val());
  } else if ($input.hasClass('max-input')) {
    $('.range-line-max').val($input.val());
  }
  // 执行过滤逻辑
  runFilter();
});

// 处理range滑块的结束滑动事件（仅触发一次）
$('body').on('change', '#box-filter form[name="filter_form"] input[type="range"]', function(e) {
  const $range = $(this);
  // 同步对应number输入框的值
  if ($range.hasClass('range-line-min')) {
    $('.min-input').val($range.val());
  } else if ($range.hasClass('range-line-max')) {
    $('.max-input').val($range.val());
  }
  // 执行过滤逻辑
  runFilter();
});

// 抽离过滤逻辑，避免重复代码
function runFilter() {
  const minPrice = $('.min-input').val();
  const maxPrice = $('.max-input').val();
  // 在这里编写你的过滤业务逻辑，比如请求接口、更新页面等
}

方案二：优化事件委托逻辑 #

如果必须使用form级别的事件委托，可以通过判断事件类型和目标元素，精准控制逻辑执行时机：

$('body').on('input change', '#box-filter form[name="filter_form"]', function(e) {
  const $target = $(e.target);
  
  // 处理range滑块：仅在change事件时执行
  if ($target.is('input[type="range"]')) {
    if (e.type !== 'change') return;
    // 同步number输入框
    $target.hasClass('range-line-min') 
      ? $('.min-input').val($target.val()) 
      : $('.max-input').val($target.val());
  } 
  // 处理number输入框：仅在input事件时执行
  else if ($target.is('input[type="number"]')) {
    if (e.type !== 'input') return;
    // 同步range滑块
    $target.hasClass('min-input') 
      ? $('.range-line-min').val($target.val()) 
      : $('.range-line-max').val($target.val());
  } 
  // 其他元素直接跳过
  else {
    return;
  }
  
  // 执行过滤逻辑
  runFilter();
});

function runFilter() {
  // 过滤业务逻辑
}

额外注意事项 #

• 移除range标签中的内联事件oninput="slideOne()"和oninput="slideTwo()"，避免与绑定的事件产生冲突。
• 你的原始代码之所以会多次触发，是因为滑动range时持续触发input事件，而你在该事件中又手动触发了change事件，导致一次滑动触发两次逻辑，且滑动过程中多次重复。

内容的提问来源于stack exchange，提问作者Jack Maessen