Toolcool Range Slider组件mouseup事件异常触发问题求助

问题描述 #

集成Toolcool Range Slider组件后，拖动滑块手柄时mouseup事件可正常触发，但点击滑块外部甚至页面其他任意区域时，该事件也会被触发。需要实现仅在拖动滑块手柄后才触发mouseup对应的逻辑。

问题分析 #

你当前绑定的onMouseUp事件并非组件针对滑块手柄的专属事件，组件的该事件可能是全局监听鼠标抬起动作，导致页面任意位置的mouseup都会触发回调。同时现有逻辑没有区分“是否实际拖动过滑块”，因此即使点击空白区域也会执行提交过滤的操作。

解决方案 #

方案一：使用组件专属的pointerUp事件 #

Toolcool Range Slider提供了pointerUp事件，该事件仅在用户拖动滑块手柄并松开时触发，不会响应页面其他区域的鼠标抬起操作。直接替换原有的onMouseUp事件即可：

修改后的JavaScript代码：

jQuery.noConflict();

window.addEventListener('load', function() {
  console.log('filters loaded');
  const filters = new Filters();
  filters.loadComponents();
}, false);

class Filters {

  loadComponents() {
    this.loadMySlider();
  }


  loadMySlider() {

    const $mySlider = document.getElementById('slider');

    if ($mySlider != null) {
      if ($mySlider.classList.contains('range-slider-widget')) {
        var sliderVal1 = 0;
        var sliderVal2 = 0;

        // 替换onMouseUp为组件专属的pointerUp事件
        $mySlider.addEventListener('pointerUp', (evt) => {
          evt.preventDefault();
          evt.stopPropagation();
          console.log($mySlider.id);
          jQuery('#min_val').val(Number(sliderVal1));
          jQuery('#max_val').val(Number(sliderVal2));

          this.submitFilters(1, true);

          $mySlider.blur();
        });

        // 移动端替换为组件的touchEnd事件
        $mySlider.addEventListener('touchEnd', (evt) => {
          evt.preventDefault();

          jQuery('#min_val').val(Number(sliderVal1));
          jQuery('#max_val').val(Number(sliderVal2));

          this.submitFilters(1, true);
        });

        $mySlider.addEventListener('change', (evt) => {
          evt.preventDefault();
          sliderVal1 = evt.detail.value1;
          sliderVal2 = evt.detail.value2;
        });
      }
    } else {
      console.log('is null');
    }
  }

  submitFilters($id, $reload) {
    console.log('submit filter');
  }
}

方案二：添加状态标记区分拖动状态 #

如果方案一不生效，可以通过状态变量标记是否实际拖动过滑块，仅在拖动后执行mouseup逻辑：

修改后的JavaScript代码：

jQuery.noConflict();

window.addEventListener('load', function() {
  console.log('filters loaded');
  const filters = new Filters();
  filters.loadComponents();
}, false);

class Filters {

  loadComponents() {
    this.loadMySlider();
  }


  loadMySlider() {

    const $mySlider = document.getElementById('slider');

    if ($mySlider != null) {
      if ($mySlider.classList.contains('range-slider-widget')) {
        var sliderVal1 = 0;
        var sliderVal2 = 0;
        let isDragging = false; // 标记是否正在拖动滑块

        // 监听滑块手柄按下事件，设置拖动标记
        $mySlider.addEventListener('pointerDown', () => {
          isDragging = true;
        });

        // 移动端监听touchStart事件
        $mySlider.addEventListener('touchStart', () => {
          isDragging = true;
        });

        $mySlider.addEventListener('onMouseUp', (evt) => {
          evt.preventDefault();
          evt.stopPropagation();
          
          // 仅拖动过滑块才执行逻辑
          if(isDragging) {
            console.log($mySlider.id);
            jQuery('#min_val').val(Number(sliderVal1));
            jQuery('#max_val').val(Number(sliderVal2));

            this.submitFilters(1, true);

            $mySlider.blur();
          }
          // 重置拖动标记
          isDragging = false;
        });

        $mySlider.addEventListener('touchend', (evt) => {
          evt.preventDefault();
          
          if(isDragging) {
            jQuery('#min_val').val(Number(sliderVal1));
            jQuery('#max_val').val(Number(sliderVal2));
            this.submitFilters(1, true);
          }
          isDragging = false;
        });

        $mySlider.addEventListener('change', (evt) => {
          evt.preventDefault();
          sliderVal1 = evt.detail.value1;
          sliderVal2 = evt.detail.value2;
        });
      }
    } else {
      console.log('is null');
    }
  }

  submitFilters($id, $reload) {
    console.log('submit filter');
  }
}

说明 #

• 方案一优先推荐，因为是组件原生提供的专属事件，逻辑更简洁可靠。
• 方案二通过手动标记拖动状态，兼容性更强，适用于组件事件不生效的场景。

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