웹앱 페이지의 스크롤 멈춤에 대한 솔루션에 대한 자세한 설명

모바일 브라우저가 현재 페이지를 스크롤할 때(그리고 페이지를 확대/축소할 수도 있음) 기본 동작이 차단되어 페이지가 강제로 정지 상태로 유지되므로 사용자 경험이 저하되고 페이지를 스크롤할 때 일시 중지되는 느낌이 들게 됩니다.

더 구체적인 설명: touchstart 이벤트 객체의 취소 가능 속성이 true이므로, 즉 리스너는 PreventDefault() 메서드를 통해 해당 기본 동작을 방지할 수 있습니다. 그러나 브라우저는 리스너가 PreventDefault()를 호출할지 여부를 미리 알 수 없습니다. 리스너가 할 수 있는 일은 기본 동작을 실행하기 전에 리스너가 실행을 마칠 때까지 기다리는 것뿐입니다. -소비. 페이지가 정지됩니다. 리스너가 빈 함수인 경우에도 일정량의 지연이 발생하므로 결국 빈 함수의 실행에도 시간이 걸립니다.

기본 개념: xxx.addEventListener('이벤트 이름', function(xxx){xxx}, useCapture).

첫 번째 매개변수는 이벤트 이름(클릭 등 제외)을 나타내고, 두 번째 매개변수는 이벤트 처리를 수신하는 함수를 나타내며, 세 번째 매개변수는 useCapture입니다.

이것이 무엇을 의미하는지 살펴보겠습니다. 직접 예를 들어보는 것이 더 직관적일 것입니다.

 <div id=level1> <div id=level2> <div id=level3>여기를 클릭하세요</div> </div></div><div id=info></div> 

 var level1 = document.getElementById(level1);var level2 = document.getElementById(level2);var level3= document.getElementById(level3);var info = document.getElementById(info);outDiv.addEventListener(click, function () { info.innerHTML += level1 + <br> }, false);middleDiv.addEventListener(클릭, function () { info.innerHTML += level2 + <br> }, false);inDiv.addEventListener(click, function () { info.innerHTML += level3 + <br>; }, false);

위 코드에 따르면 useCapture의 효과가 true와 false인지 살펴보겠습니다.

모두 거짓인 경우 트리거 순서는 level3, level2, level1입니다.

모두 참인 경우 트리거 순서는 level1, level2, level3입니다.

level1이 true이고 나머지는 false인 경우 트리거 순서는 level1, level3, level2입니다.

level2가 true이고 나머지는 false인 경우 트리거 순서는 level2, level3, level1입니다.

level3이 true이고 나머지는 false인 경우 트리거 순서는 level3, level2, level1입니다.

level1이 false이고 나머지는 true인 경우 트리거 순서는 level2, level3, level1입니다.

level2가 false이고 나머지는 true인 경우 트리거 순서는 level1, level3, level2입니다.

level3이 false이고 나머지는 true인 경우 트리거 순서는 level1, level2, level3입니다.

위의 결과로부터 다음과 같은 결론을 도출할 수 있습니다.

true의 트리거 순서는 항상 false보다 앞에 옵니다.

여러 개가 true이면 외부 레이어가 내부 레이어보다 먼저 트리거됩니다.

다중이 false인 경우 내부 레이어가 외부 레이어보다 먼저 트리거됩니다.

사용방법

 addEventListener('이벤트 이름', function(xxx){xxx}, { 캡처: false, 패시브: false, 한 번: false})

세 가지 속성은 모두 Boolean 타입의 스위치이며, 기본값은 false입니다.

캡처: 이전 useCapture 매개변수와 동일합니다.

한 번: 리스너가 일회성이며 한 번 실행된 후 자동으로 제거되는EventListener가 됨을 의미합니다.

Passive: 웹앱의 터치 이벤트에 사용됩니다.

모바일 브라우저가 이벤트를 사용할 때 스크롤 이벤트 리스너의 80%가 기본 동작을 방지하지 않는 것으로 이해됩니다. 이는 대부분의 경우 브라우저가 헛되이 기다린다는 것을 의미합니다. 따라서 패시브 리스너가 탄생했습니다. 패시브는 순종을 의미하며, 이는 이벤트의 기본 동작을 거부하지 않음을 의미합니다. 브라우저는 리스너가 패시브임을 알게 되면 동시에 두 스레드에서 리스너를 실행할 수 있습니다. . JavaScript 코드 및 브라우저의 기본 동작.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.