Slider event bubbling up and causing swiperight

Questions
1

Problem:
What happens is if you swipe across the range slider the event bubbles up and invokes the swiperight event. We’ve tried several ways of mitigating this.

I’m using jQuery 3.4.1 and jquery.touch.js - (link points to the open issue on github) and F7 version 5.2.0

How I implemented my range sliders, swipe events etc.

There’s a series of range sliders in my settings page defined like this:

    <div class="block-title">Money</div>
    <div class="list simple-list">
      <ul>
        <li>
          <div class="item-cell width-auto flex-shrink-0">
            <span class="fas fa-coins color-yellow"></span>
          </div>
          <div class="item-cell flex-shrink-3">
            <!-- range slider, enable labels -->
            <div class="range-slider range-slider-init color-orange no-swipe" data-label="true">
              <input id="qMoney" class="no-swipe" type="range" min="0" max="200" step="1" value="25">
            </div>
          </div>
          <div class="item-cell width-auto flex-shrink-0">
            <span class="fas fa-dollar-sign color-green"></span>
          </div>
        </li>
      </ul>
    </div>

In the page init code I have this:

function settingsPageReady()
{
  $("#settingsPage").on("swiperight", function (event) {
      app.views.main.router.back('/account/', {force: 'true', ignoreCache: true});
  });
}

Inside the app.js I have disabled all of the F7 swiping like this:

    iosDynamicNavbar: false,  // disable swipeback events (we handle those in the touch handler)
    iosSwipeBack: false,
    mdSwipeBack: false,
    auroraSwipeBack: false,

Inside the settingsPageInit I have also tried all of these and none of them get invoked.

  $('#settingsPage').on('touchmove mousemove', 'input[type="range"]', function(e) {
    e.stopPropagation();
  });
  $('#qMoney').on('touchmove mousemove', 'input[type="range"]', function(e) {
  	e.stopPropagation();
  });
  $('.range-slider').on('touchmove mousemove', 'input[type="range"]', function(e) {
  	e.stopPropagation();
  });

BenMajor created a fiddle which demonstrates that the problem can be mitigated in pure html by adding using a “touchmove mousemove” handler to stop the event propagation but under F7 this doesn’t work.

So, what’s the solution?

2

Add swiper-no-swiping

    <div class="list simple-list swiper-no-swiping">
      <ul>
        <li>
          <div class="item-cell width-auto flex-shrink-0">
            <span class="fas fa-coins color-yellow"></span>
          </div>
          <div class="item-cell flex-shrink-3">
            <!-- range slider, enable labels -->
            <div class="range-slider range-slider-init color-orange no-swipe" data-label="true">
              <input id="qMoney" class="no-swipe" type="range" min="0" max="200" step="1" value="25">
            </div>
          </div>
          <div class="item-cell width-auto flex-shrink-0">
            <span class="fas fa-dollar-sign color-green"></span>
          </div>
        </li>
      </ul>
    </div>
3

Ok, so you have custom implementation of swipeback. Setting stopPropagation on range slider can also break its functionality. You need to introduce some flag variable, and set it to true on touchmove mousemove and unset on touchend mouseup. And in your swiperight handler to check this flag and don’t do router.back if this flag is true :slight_smile:

4

Do you have any documentation to suggest that preventing event propagation on a range input can break its functionality?

5

Am not questioning by the way, just curious!

6

None of the jquery touchmove mousemove events fire. Period.

This doesn’t fire:

  $$('#qMoney').on('range:change', function (e) {
    var range = app.range.get(e.target);
    $('#valMoney').text( range.value[0] );
  });

In fact, none of these fire:

  $$('.range-slider').on('touchmove mousemove', 'input[type="range"]', function(e) {
    console.log("class stopprop called");
  	e.stopPropagation();
  });
  $$('#qMoney').on('touchmove mousemove', 'input[type="range"]', function(e) {
    console.log("element stopprop called");
  	e.stopPropagation();
  });
  $$('#testProp1').on('touchmove mousemove', 'input[type="range"]', function(e) {
    console.log("testProp1 stopprop called");
  	e.stopPropagation();
  });
  $$('#testProp2').on('touchmove mousemove', 'input[type="range"]', function(e) {
    console.log("testProp2 stopprop called");
  	e.stopPropagation();
  });
7

BTW, @benmajor meet @nolimits4web aka Vladimir. Vladimir, meet @benmajor.

8

I think it should be obvious. If you prevent some event on something it can be broken because F7 uses same toouchmove/mousemove events

9

Events don’t work because that input is hidden, no much sense to attach UI events to it

10

Ah, so you mean that it will break its functionality inside of F7 by stopping propagation, not in native. Thanks for clarifying.

11

If the input is hidden, what would/should we attach events to?

12

On .range-slider itself:

$$('.range-slider').on('touchmove mousemove', function(e) {
    console.log("touchmove on range slider");
});
13

As I posted above, that doesn’t work… it never appears to get called.

14

go to => https://framework7.io/kitchen-sink/core/
navigate to => “Range Slider”
open console:

var $$ = Dom7;
$$('.range-slider').on('touchmove mousemove',function(e){
  console.log(e.type);
});

wokrs for me

1 Like
15

I don’t understand the point of this post. @nolimits already said the issue was with his framework and how he implemented it. I found a work. Case closed.