Does jquery have touch function?

WBOY
Release: 2022-06-09 18:27:21
Original
2288 people have browsed it

There is a touch function in jquery; the touch function will be triggered when the user touches the page: 1. The tap event is triggered when the user taps an element; 2. The taphold event is triggered when the user taps an element and Triggered when held for one second; 3. The swipe event is triggered when the user slides more than 30px horizontally on an element; 4. The swipeleft event is triggered when the user slides more than 30px from the left on an element; 5. The swiperight event is triggered when the user slides more than 30px from the left on an element. Triggered when an element slides more than 30px from the right.

Does jquery have touch function?

The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.

Does jquery have touch function

Touch event is triggered when the user touches the screen (page).

  • The tap event is triggered when the user taps an element.

  • The taphold event is triggered when the user taps an element and holds it for one second

  • The swipe event is triggered when the user taps an element horizontally The swipeleft event is triggered when the user slides more than 30px from the left on an element:

  • swipeleft event is triggered when the user slides more than 30px from the left on an element:

  • swiperight The event is triggered when the user slides more than 30px from the right on an element:

Simple explanation:

tap (tap): A quick and complete tap Trigger after

taphold (tap and hold): tap and hold (about one second) and then trigger

swipe (swipe): drag horizontally more than 30PX within one second, or vertically Event triggered when dragging less than 20px occurs. How long and how many pixels to drag can be set. This event has its associated properties, which are

  • scrollSupressionThreshold (default: 10px) – horizontal dragging greater than this value will not trigger.

  • durationThreshold (default: 1000ms) – If the sliding time exceeds this value, no sliding event will be generated.

  • horizontalDistanceThreshold (default: 30px) – A sliding event will occur only when the horizontal swipe distance exceeds this value.

  • verticalDistanceThreshold (default: 75px) – A sliding event will occur only when the vertical swipe distance is smaller than this value.

swipeleft (left swipe): Triggered when the swipe event is in the left direction

swiperight (right swipe): Triggered when the swipe event is in the right direction

Examples are as follows:

tap (tap): Triggered after a quick and complete tap

$(function(){
      $("#home").live('tap', function() {
        $('#toPage2').click(); // 为首页绑定点击事件
      });
      $("#page-2").live('tap', function() {
        $('#toHome').click(); // 为另一页面绑定点击事件
      });
    });
Copy after login

taphold (tap and hold): Trigger after tapping and holding (about one second)

$(function(){
      $("#home").live('taphole', function() {
        $('#toPage2').click(); // 为首页绑定长按事件
      });
      $("#page-2").live('taphole', function() {
        $('#toHome').click(); // 为另一页面绑定长按事件
      });
    });
Copy after login

swipe (swipe): Swipe left or right

$(function(){
      $("#home").live('swipe', function() {
        $('#toPage2').click(); // 为首页绑定滑动事件
      });
      $("#page-2").live('swipe', function() {
        $('#toHome').click(); // 为另一页面绑定滑动事件
      });
    });
Copy after login

Recommended video tutorial: jQuery video tutorial

The above is the detailed content of Does jquery have touch function?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template