Javascript swipe event while maintaining functionality

Question

I want to use swipe events in a mobile web application (Android and iOS), but I also need browsers to use functionality to stay in place.

I tried using various touch event libraries such as Hammer.js, but everyone seems to give up on mobile Safari to scale functionality when swipes are processed. It would also be nice to keep the vertical scroll.

Basically, I'm looking for a way to recognize left / right kicks and that's it. Any ideas?

Answer 1

In a recent project, I used similar functionality. To let the zoom functions for zooming work, you just need to make sure that you specify the values ​​correctly in the view tag, for example.

<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/> 

The most important values ​​are user scalable = yes, as well as the maximum scale, as this must be greater than 1.0 in order to scale.

Additional information about the viewport can be found here: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

For swipe events, you can bind swipeleft and swiperight events to the .on () function in jQuery Mobile.

Here is an example of what your code looks like:

 $('#yourElement').on('swipeleft swiperight', function (event) { //swiped to the left if (event.type == "swipeleft") { //do something } //swiped to the right if (event.type == "swiperight") { //do something } }); 

For more information on jQuery Mobile events, you can check this link (or the m_gol link provided above, since they are basically the same):

http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Using both sets of code above, you can detect swipe events as well as a pinch to enlarge the page.