jquery에 터치 기능이 있나요?

jquery에는 터치 기능이 있습니다. 사용자가 페이지를 터치하면 터치 기능이 실행됩니다. 1. 사용자가 요소를 탭하면 탭 이벤트가 실행됩니다. 3. 사용자가 요소에서 수평으로 30px 이상 슬라이드하면 스와이프 이벤트가 트리거됩니다. 4. 사용자가 요소에서 왼쪽으로 30px 이상 슬라이드하면 스와이프 이벤트가 트리거됩니다. . swiperight 이벤트는 사용자가 요소의 왼쪽에서 30px 이상 슬라이드할 때 트리거됩니다.

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.4.1 버전, Dell G3 컴퓨터.

jquery에 터치 기능이 있나요?

사용자가 화면(페이지)을 터치하면 터치 이벤트가 발생합니다.

• tap 이벤트는 사용자가 요소를 탭할 때 트리거됩니다.

• taphold 이벤트는 사용자가 요소를 탭하고 1초 동안 누르고 있을 때 트리거됩니다.

• swipe 이벤트는 사용자가 요소에서 수평으로 30px 이상 슬라이드할 때 트리거됩니다.

• swipeleft 이벤트는 user is on 사용자가 요소의 왼쪽에서 30px 이상 슬라이드하면 swiperight 이벤트가 트리거됩니다.

• 사용자가 요소의 오른쪽에서 30px 이상 슬라이드하면 swiperight 이벤트가 트리거됩니다.

Simple 설명:

tap(탭): 빠르고 완전한 탭 후에 트리거됨

taphold(taphold): 탭하고 놓지 않은 후 트리거됨(약 1초)

swipe(스와이프): 1초 이내에 수평 드래그가 더 커짐 30PX보다 작거나 20px 이벤트 발생 시 발생하는 이벤트보다 수직 드래그가 작습니다. 드래그할 픽셀 수와 길이를 설정할 수 있습니다. 이 이벤트에는

• scrollSupressionThreshold(기본값: 10px)라는 관련 속성이 있습니다. 이 값보다 큰 가로 드래그는 실행되지 않습니다.

• durationThreshold(기본값: 1000ms) – 슬라이딩 시간이 이 값을 초과하면 슬라이딩 이벤트가 생성되지 않습니다.

• horizontalDistanceThreshold (기본값: 30px) - 수평 스와이프 거리가 이 값을 초과하는 경우에만 슬라이딩 이벤트가 발생합니다.

• verticalDistanceThreshold (기본값: 75px) – 슬라이딩 이벤트는 수직 스와이프 거리가 이 값보다 작은 경우에만 발생합니다.

swipeleft(왼쪽 스와이프): 스와이프 이벤트가 왼쪽 방향일 때 트리거됨

swiperight(오른쪽 스와이프): 스와이프 이벤트가 오른쪽 방향일 때 트리거됨

예는 다음과 같습니다.

tap (가벼운 탭): 빠르고 완전한 탭 후 트리거

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

taphold(탭하고 길게 누르기): 트리거되기 전(약 1초) 길게 탭하기

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

스와이프(스와이프): 원하는 대로 왼쪽 및 오른쪽으로 슬라이드

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

비디오 튜토리얼 추천: jQuery 비디오 튜토리얼

위 내용은 jquery에 터치 기능이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!