search

robinrodricks / vue3-touch-events

Simple touch events support for vue.js 3
MIT License
216 stars 27 forks source link

Feature Request: v-touch-class alternative that works for click and touch instead of hover and touch #6

Open jeffderek opened 2 years ago

jeffderek commented 2 years ago

On a lot of touch devices, adding a class for touch feedback is much more responsive than using the css :active selector, so I prefer to use that approach when possible. v-touch-class works great for that, but for projects that will be used on both mobile and desktop, I want it to behave as a click on desktop and not as a hover. Basically just looking for a version of v-touch-class that doesn't use the mouseenter and mouseleave events.

robinrodricks commented 2 years ago

Its a good idea. What tag name do you propose and how will it work on mobile and desktop?

jeffderek commented 2 years ago

It depends on how backwards compatible you want to be, really. So there are two different classes I think you want.

  1. A class that is added when you touch on mobile and when you hover on desktop (v-touch-class)
  2. A class that is added when you touch on mobile and when you click on desktop

Name options for item 2 would be v-press-class or v-click-class. Both of those make sense to me now, but it's not very intuitive without the docs what the difference between v-touch-class and v-click-class is. Users likely would have to consult the docs each time.

Another approach entirely would be three classes.

  1. A class that is added when you touch on mobile (v-touch-class)
  2. A class that is added when you hover on desktop (v-hover-class)
  3. A class that is added when you click on desktop (v-click-class)

Then if you wanted touch and hover, you could just have the same class get added for both of those, or if you wanted touch and click you could have the same class get added for both of those. This is a lot easier to handle naming, because you have v-touch-class, v-click-class, and v-hover-class. On the other hand it's not very backwards compatible because now v-touch-class would no longer do stuff that it used to do.