13년 동안 아르바이트를 하면서 jQuery에 터치 이벤트 지원을 추가하려고 심심해서 추가한 코드입니다. 좀 지루했기 때문에 고객이 모바일 기기, 주로 Webkit 모바일 기기와 호환되는 JS touch를 사용하여 반응형 웹 페이지를 추가하도록 도왔습니다.
여기서 구현 내용을 공유하겠습니다.
먼저 코드를 붙여넣으세요.
//Published by Indream Luo
//Contact: indreamluo@qq.com
//Version: Chinese 1.0.0
!function ($) {
window.indream = window.indream || {};
$.indream = indream;
//Define events
indream.touch = {
evenList: {
touchStart: {
htmlEvent: 'touchstart'
},
touchMove: {
htmlEvent: 'touchmove'
},
touchEnd: {
htmlEvent: 'touchend'
},
tapOrClick: {
eventFunction: function (action) {
$(this).each(function () {
(function (hasTouched) {
$(this).touchEnd(function (e) {
hasTouched = true;
action.call(this, e);
});
$(this).click(function (e) {
if (!hasTouched) {
action.call(this, e);
}
});
}).call(this, false);
});
return this;
}
},
moveOrScroll: {
eventFunction: function (action) {
$(this).each(function () {
(function (hasTouched) {
$(this).touchMove(function (e) {
hasTouched = true;
action.call(this, e);
});
$(this).scroll(function (e) {
if (!hasTouched) {
action.call(this, e);
}
});
}).call(this, false);
});
이것을 반환하세요.
}
}
}
}
//jquery에 이벤트 추가
(indream.touch.evenList의 var eventName) {
var event = indream.touch.evenList[eventName];
$.fn[eventName] = event.eventFunction || (함수(eventName, htmlEvent) {
반환 함수(작업) {
$(this).each(function () {
$(this).bind(htmlEvent, action);
/ /IE 또는 기타 이벤트 리스너 메서드 추가
if (this.attachEvent) {
this.attachEvent('on' htmlEvent, function (e) {
$(this).on(eventName);
});
} else {
this.addEventListener(htmlEvent, function (e) {
$(this).on(eventName);
});
}
});
이것을 반환하세요.
}
})(eventName, event.htmlEvent);
}
}(window.jQuery);
터치 이벤트 관련 정보는 온라인에 많이 나와 있어서 간단하게 설명하지는 않겠습니다.
터치 이벤트가 마우스 이벤트를 대체합니다
Webkit 모바일 장치에서 터치 컨트롤은 먼저 터치 이벤트를 트리거한 다음 0.5초 후에 마우스 이벤트를 터치합니다.
개인적으로는 디자인 측면에서는 이해가 되는 부분이라고 생각합니다. 먼저 터치 제어 요구 사항을 충족한 다음 원래 데스크톱 지향 웹 페이지의 사용을 충족하기 위해 마우스 이벤트와의 "하향" 호환성을 충족합니다.
모든 이벤트의 대략적인 실행 순서는 touchstart->touchmove->touchend->0.5s->마우스 이벤트 mouseover/scroll/click 등입니다.
웹킷 모바일 브라우저의 디자인에 따르면 일반적으로 데스크톱 웹페이지에 맞춰 개발한 뒤 모바일 기기에서 사용해도 문제가 없습니다. 그러나 데스크톱에서 널리 사용되는 호버 효과는 마우스 이벤트와 클릭 이벤트가 터치에 의해 계속해서 발생하기 때문에 비극적인 경우가 많습니다. 0.5초 지연도 사용자 경험에 큰 해를 끼칩니다.
그래서 click 이벤트를 대체하고 0.5초 동안 종료하기 위해 tapOrClick 이벤트를 추가했습니다.
스크롤 잠금
사용자가 터치 장치를 사용하여 스크롤하고 터치가 중지되면 브라우저는 전체 페이지를 잠그고 모든 UI 리소스 점유를 일시 중지하며 스크롤을 위해 대부분의 리소스를 커널에 맡깁니다. 페이지 콘텐츠를 확대하거나 축소할 때에도 동일한 상황이 발생하며 더욱 그렇습니다.
롤링 그라데이션 효과를 추가하고 싶어서 슬라이딩 시 스크롤 중에 수행되어야 하는 효과를 수행하기 위해 moveOrScroll 이벤트를 추가했습니다.
물론 손가락이 화면에서 벗어나면(터치 이벤트가 중지됨) 페이지가 자유롭게 스크롤되는 동안 js도 정지되기 때문에 아직 완벽하지는 않습니다. 이것은 솔루션이 없는 솔루션일 뿐입니다.
스크롤 잠금은 또 다른 문제를 야기합니다. 스크롤에는 위아래, 왼쪽 및 오른쪽, 자유의 세 가지 유형이 있습니다.
터치 장치를 사용해보면 터치에서 상하로 스크롤되는 것으로 판단되면 터치할 때 좌우로 아무리 슬라이드해도 왼쪽이나 오른쪽으로 슬라이드하는 효과가 없는 것을 알 수 있습니다. 당신은 놓아주고 다시 시작합니다. 왼쪽 및 오른쪽 스크롤의 시작 부분에서도 동일한 일이 발생합니다. 프리 스크롤을 하려면 처음부터 대각선 스크롤이 필요합니다.
이때 특정 이벤트를 추가해야 한다면 해당 이벤트의 판단에 주의가 필요합니다. jQuery의 이벤트 콜백 매개변수에서 매개변수 이름이 e라고 가정하면 일반적으로 다음을 사용합니다.
e.originalEvent.touches[0].pageX는 터치 상황을 판단할 수 있습니다. 개발 중에는 판단을 내리기 전에 터치 이벤트를 직접 기록해야 합니다.
기본 및 최적
자신에게 없는 스타일 효과를 얻기 위해 많은 수의 JS 메소드 트리거를 사용하지 마십시오.
예를 들어 요소가 정적인 경우 position:fix;를 사용하여 구현해야 하지만 많은 개발자는 js를 사용하여 해당 컨트롤의 위치를 지속적으로 새로 고칩니다.
이 구현이 터치 기기에 배치되는 경우 일반적으로 다음 두 가지 상황만 발생합니다.
1. 멈췄습니다
2. 페이지가 정지되었습니다. 정지 기술 이후 갑자기 모든 이벤트가 실행된 것으로 나타났습니다. (이유는 위와 같습니다. 브라우저가 UI 스레드의 리소스를 집중시킵니다. 커널에 우선순위를 부여하기 위함)
일반 모바일 기기의 화면 유효 주사율은 30Hz에 불과하고, 줄어든 명령어 집합 CPU 자체도 느려지는데, 대부분의 모바일 기기는...안드로이드...
따라서 성능은 기본적으로 제공되는 방법에 최대한 의존해야 합니다. 일부 해킹 및 커버 방법은 상대방이 용납할 수 없습니다.
활용방법
당시에는 아르바이트 배송이 1~2주 정도 밖에 안 걸릴 것 같아서 코드를 잘 작성하지 않았는데 그래도 잘 됐어요. 일반적인 사용법은 일반 jQuery 이벤트와 동일합니다. 이름 지정 및 구현은 실제로 논쟁의 여지가 있습니다.
$('.sign .usernametip') .tapOrClick( function () {
$(this).css('visibility', 'hidden');
$('.sign .username').focus();
});
프로젝트의 많은 것들이 그렇듯이, 많은 것들이 단순해 보이지만 실제로는 다양한 문제들이 발생할 것입니다.
터치 이벤트는 단순히 기능을 구현하는 것 외에도 가장 중요한 문제인 특정 상호 작용 모드를 고려해야 합니다.
예를 들어, 제한된 사용자 화면에 더 많은 공간을 남겨두기 위해 터치에서 많은 공간을 숨겨야 하며, 클릭으로 전환되는 많은 요소는 최고의 터치 경험을 위해 슬라이딩 전환으로 변경되어야 하며, 심지어 다른 슬라이딩도 가능합니다. 조건을 고려해야 합니다. 각 터치 이벤트의 다른 체류 이벤트는 다른 작업을 나타낼 수 있으므로 구별해야 합니다...
jQuery Mobile 등에는 이미 비교적 완성도 높은 다양한 메소드가 있다는 것을 알고 있지만 직접 구현하지 않을 수 없습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
