Touch events and JavaScript

Wappler General Need Help
1

I have a function to get position of a swiper, this works when triggered from click but not from touch move or start. Any idea how to fix this?

<div is="dmx-swiper" id="swiper1" class="sw-pages-snapscroll" speed="250" dmx-style:pointer-events="swiper2.index == 1 ? 'none' : 'all'" observer="true" dmx-on:touchmove="swiper1TouchHandler()"

function swiper1TouchHandler() {
        var s = $("#swiper1 > .swiper-wrapper:eq(0)");
        var x = $(s).offset().left;
        dmx.parse("swiper1Xpos.setValue('" + x + "')")
    }

Message from chrome:

[Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Tested in chrome & ios safari

2

You are using dynamic events (dmx-on) to call JavaScript function. You should use static events for that (without dmx-on)

Dynamic events are for app connect expressions and actions only.

3

Ok thanks, I tested both it still doesn’t work.

4

Also you don’t need the JavaScript function at all you can just call the setValue action directly and use the swipes data all in one dynamic event action

1 Like
5

I don’t understand how to do that could you show me please?
Is that going to fix my issue here though, of the touchmove event actually working?

6

I got it thanks! works fine now :slight_smile:

ontouchmove=" var s = $(&quot;#swiper1 > .swiper-wrapper:eq(0)&quot;); var x = $(s).offset().left; dmx.parse(&quot;swiper1x.setValue('&quot; + x + &quot;')&quot;)">

:white_check_mark:

7

For anyone else, to get the x value of a swiper offset is not right.
This is correct:

var s = $("#swiper1 > .swiper-wrapper:eq(0)");
var style = window.getComputedStyle($(s).get(0));
var matrix = new WebKitCSSMatrix(style.webkitTransform);
var x = matrix.m41
dmx.parse("swiper1x.setValue(" + x + ")")
1 Like