Home > Article > Web Front-end > Does jquery have touch function?
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.
The operating environment of this tutorial: windows10 system, jquery3.4.1 version, Dell G3 computer.
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(); // 为另一页面绑定点击事件 }); });
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(); // 为另一页面绑定长按事件 }); });
swipe (swipe): Swipe left or right
$(function(){ $("#home").live('swipe', function() { $('#toPage2').click(); // 为首页绑定滑动事件 }); $("#page-2").live('swipe', function() { $('#toHome').click(); // 为另一页面绑定滑动事件 }); });
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!