Exclude option

[christopheSeeka]

Is there a way if for example i attach a slideLeft event on my entire #app but want exclude the swipe if on a certain element?
in my case i have a page with a table on mobile where overflow y is on to scroll the table content so this should not fire the on swipe ideally.

Thank you in advance.

[christopheSeeka]

I used the following on the table:

v-touch:start="disableSwipe" v-touch:end="enableSwipe"

with the 2 methods:

methods: {
disableSwipe: function(){
this.$store.state.enableSwipe = false
},
enableSwipe: function(){
let _this = this
setTimeout(function(){
_this.$store.state.enableSwipe = true
}, 200)
}
}

Then a condition in my #app swipeEvent. Had to use a small delay in the enableSwipe though else it was firing it still.

Not sure its optimum, please let me know in case there is better option :)

[alexcroox]

I too was looking for this in the docs. It would be useful to be able to put a class on an element, e.g:

<table class="v-touch-ignore">

so that when touching these elements v-touch is not triggered if it's set on the parent.

My use case is similar to yours, mobile horizontally scrolling table I need to stop it firing swipes on the parent when interacting with it.

[alexcroox]

If the raw event was exposed in the v-touch callback function params we might be able to check for something like that.

[jerrybendy]

I'm not understand this issue very clearly for my bad English. And @alexcroox mentioned the raw event, all v-touch callbacks have the raw event object as their last parameter.

[alexcroox]

@jerrybendy thanks for pointing out the second parameter, I hadn't noticed that!

Using that second param I managed to do it like this, however it would be nice if the plugin supported this and with different classes for ignoring different actions eg swipe, touch, swipe direction etc for maximum flexibility.

<div v-touch:swipe.right="goBack" class="container">
    <table class="swipe-ignore">
        <tr>
            <td /> <--- I swiped here
        </tr> 
    </table>

    <div />
</div>

methods: {
  goBack(direction, event) {
    if (!event.target.closest('.swipe-ignore')) {
      // Perform action
    } else {
      // Ignore swipe
    }
  }
}

basically event.target.closest walks up the dom tree from the target trying to find any parents with the class .swipe-ignore. This is useful because it means I can put the ignore class as high up as a I like in the tree.

Note .closest() isn't supported by IE so would need this polyfill (if you are handling polyfills manually): https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill