Mousedown & Touchstart event in Swiper

Questions
1

I try to catch the mousedown and thouchstart event within a template.

The following three variations for click works properly and result in an Alert 3 times

<li class="item-content" 
    key="{{idx}}" 
   @click="myAlert('click 1')"
   onclick="alert('click 2')"
   id="item{{idx}}">

$$('#item2').on('click', function(e) {
   alert('click 3')
})

However, when I change to event type mousedown / onmousedown or touchstart / ontouchstart nothing happens.

<li class="item-content" 
    key="{{idx}}" 
   @mousedown="myAlert('mousedown 1')"
   onmousedown="alert('mousedown 2')"
   id="item{{idx}}">

$$('#item2').on('mousedown', function(e) {
   alert('mousedown 3')
})

I have inspected the Touch.js file from F7 as well as the Template7 files but I cannot find a reason why mousedown and touchstart are not working from within a template.

Anyone any suggestions ?

Ps,
I try to change the content dynamically of the next slide in Swiper depending on an item where I start the swipe gesture without clicking that item. I need to use a template because the items on the current slide are within a list which is also dynamically generated.

2

I can’t replicate it, but looks like issue somewhere else, i suspect could be somewhere in VDOM. Do you have a minimal JSFiddle with the issue so i can check it?

3

Thank you very much for your rapid response.

I have produced a simple JSFiddle here and came to the conclusion that it might be some related to Swiper.
The first part is just plain HTML and the second part of the page is the same code inside a Swiper slide where the mousedown function doesn’t seem to get triggered ?

4

Oke, I just tested my own JSFiddle code at an iPhone and it seems that touchstart is working according expectation. It is just the mousedown event that is not working correctly in a browser with a mouse within Swiper.
For me this is a relief and not a braking point anymore since my WebApp is intended to be used on a mobile / touch device.

Ps,
I just saw that the message in the Alert box says: " onmousestart" which should be “ontouchstart” obviously :slight_smile:

5

try to set “touchStartPreventDefault” => false

<div class="swiper-container" data-swiper="{'touchStartPreventDefault':false}">
1 Like
6

Many thanks Pipi !
That does the trick. I have updated the JSFiddle and it works now also for mousedown on a laptop with a mouse and touchstart remains working on a touch device :grinning:

7

Hi Vladimir,

I discovered via Google that you provided a Framework7 Starter for JSFiddle which was a pleasant surprise for me. So thank you very much ! :smile:

But I might not be the only one who was not aware of this feature which is a great help for sharing code and debugging my mousedown issue. Perhaps you could mention it somewhere in de F7 docs and/or in this forum at a more visible place.

1 Like