Javascript Event is fired when clicking anywhere on page

65 Views Asked by At

I add a slider component to my page, I can move the slider handles, on mouseup-event the action is triggered - so far so good - but when i click next to the slider or even at a completely different place on the page, the mouseup-event is triggered again. I don't know where to look for or what to do.

The slider component is https://range-slider.toolcool.org/

I don't know if I should ask the slide developer for support or am I doing something wrong?

What I'm expecting? That the mouseup-event is only triggered when the slider handle is moved. Not on a click-event outside the slider.

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')) {
        // listen to the change event

        var sliderVal1 = 0;
        var sliderVal2 = 0;

        $mySlider.addEventListener('onMouseUp', (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();
        });

        $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');
  }
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="field-checkbox">
  <div class="input-wrapper range-slider">
    <div class="filter-title">
      <h4>Slider</h4>
    </div>

    <input type="hidden" name="min_val" class="form-control filter" id="min_val" value="1" data-min-val="1" />
    <input type="hidden" name="max_val" class="form-control filter" id="max_val" value="100" data-max-val="100" />
    <tc-range-slider id="slider" class="range-slider-widget" min="1" max="100" value1="1" value2="100" generate-labels="false" round="0" value1-label="#value-ca-1" value2-label="#value-ca-2" slider-height="0.9rem" slider-bg-fill="#f74331" slider-bg="#888888"
      pointer1-shadow="none" pointer1-width="20px" pointer1-height="20px" pointer1-bg="#1568b9" pointer1-bg-hover="#1568b9" pointer1-bg-focus="#1568b9" pointer1-border="1px solid #1568b9" pointer1-border-hover="1px solid #1568b9" pointer1-border-focus="1px solid #1568b9"
      pointer2-shadow="none" pointer2-width="20px" pointer2-height="20px" pointer2-bg="#1568b9" pointer2-bg-hover="#1568b9" pointer2-bg-focus="#1568b9" pointer2-border="1px solid #1568b9" pointer2-border-hover="1px solid #1568b9" pointer2-border-focus="1px solid #1568b9"
      keyboard-disabled="true" mousewheel-disabled="true"></tc-range-slider>
    <div class="row">
      <div class="col">
        <div id="value-ca-1"></div>
      </div>
      <div class="col text-end">
        <div id="value-ca-2"></div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.4.slim.js" integrity="sha256-dWvV84T6BhzO4vG6gWhsWVKVoa4lVmLnpBOZh/CAHU4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/plugins/tcrs-binding-labels.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>

0

There are 0 best solutions below