EventListenerOptions 의 passive 옵션
true
일 경우 이 수신기 내에서 preventDefault()
를 절대 호출하지 않을 것임을 나타내는 불리언 값true
인데 수신기가 preventDefault()
를 호출하면, 사용자 에이전트는 콘솔에 경고를 출력하고 이 외에 아무런 동작을 하지 않는다. 명시하지 않을 경우 기본 값은 false
이다. passive
가 false
인 것은 브라우저가 스크롤링을 처리하려고 시도하는 동안 터치 이벤트 및 휠 이벤트를 처리하는 이벤트 리스너가 브라우저 메인 스레드를 차단할 가능성을 도입한다. 이 문제를 방지하기 위하여, Safari 와 IE를 제외한 브라우저에서 window
, document
, document.body
와 같은 도큐먼트 레벨 노드의 wheel
, mousewheel
, touchstart
, touchmove
이벤트에서 기본 값은 true
이다. 그러면 이벤트 리스너가 이벤트를 취소할 수 없으므로 사용자가 스크롤하는 동안 페이지 렌더링을 차단할 수 없다. 모든 브라우저에서 passive
옵션이 항상 false
여야한다면 passive:fasle
값을 명시해줘야 한다. 기본적인 scroll 이벤트에서는 passive값을 신경쓰지 않아도 된다.passive:true
속성을 적용 하자.touchstart
, touchmove
이벤트 리스너를 가진다. 이는 scrolling events
와 연관이 있다. 아래 코드 작성 시 터치시 발생하는 기본 스크롤 동작을 막을 수 있다.document.addEventListener("touchstart", function (e) {
console.log("hi");
e.preventDefault();
});
이러한 이유 때문에 브라우저는 이벤트 리스너 로직이 끝나기를 기다리고나서야 실제 페이지 스크롤을 한다.passive:true
이면 e.preventDefault()
를 무시하고 스크롤이 바로 동작한다.document.addEventListener(
"touchstart",
function (e) {
console.log("hi");
e.preventDefault();
},
{ passive: true }
);
스크롤동작 시 :hover 스타일 막기
Is it possible to open developer tools console in Chrome on Android phone?
https://stackoverflow.com/questions/37256331/is-it-possible-to-open-developer-tools-console-in-chrome-on-android-phone