[mobile] 레이어팝업 구현시 이벤트 캡처 현상 제거하기

레이어팝업에서 스크롤 이벤트를 발생 시켜야 할 경우 난 분명 스크롤이 있는 곳을 스크롤 하였는데 바디 부분도 함께 스크롤 되는 경우가 있다.

이런 버블링 현상을 제거해 주기 위해 보통,

$('body').bind('touchmove', function(e){

e.preventDefault();

});

이 이벤트를 걸어주는데 모바일에서 직접 볼 경우엔 바디 뿐만 아니라 레이어팝업에 있는 스크롤 기능조차 안된다. 

또한 웹상에서 모바일 미리보기로 볼 경우에,

이런 에러가 콘솔에 찍히는걸 볼 수 있다. 

preventDefault가 먹히지 않는 것인데,

이 경우에는 html과 body부분의 스크롤을 숨기고, 레이어 팝업에서 스크롤 되야하는 영역에 직접 스크롤 스타일을 넣어준다.

뿐만아니라, passive 현상을 제거하기위한 함수 선언 및 캡처를 false로 지정해야 한다. 

아래를 참고하자.

// :::::::::::::::::::::: 중첩 버블링 현상 작업 :::

function bubblingPrevent(event) {

event.preventDefault();

}

function bubblingLock() {

// prevent to event bubbling 구현

document.body.addEventListener('touchmove', bubblingPrevent, isPassive() ? {

capture: false,

passive: false

} : false);

}

function bubblingUnlock() {

// prevent to event bubbling 해제

document.body.removeEventListener('touchmove', bubblingPrevent, isPassive() ? {

capture: false,

passive: false

} : false);

}

// :::::::::::::::::::::: 중첩 버블링 현상 에서 passive error 작업 :::

function isPassive() {

var supportsPassiveOption = false;

try {

addEventListener("test", null, Object.defineProperty({}, 'passive', {

get: function () {

supportsPassiveOption = true;

}

}));

} catch (e) {

}

return supportsPassiveOption;

}

function eventFunction($id) {

// prevent to event bubbling 호출

bubblingLock();

$('body').css({

overflowY: 'hidden'

});

}

물론 이벤트가 종료되는 시점에, 

다시 스타일을 원상복구 시켜준다. 

$('.js-event').on('click', function () {

// prevent to event bubbling 해제

bubblingUnlock();

$('body').css({

overflowY: 'auto'

});

});

- 참고 -

http://blog.christoffer.online/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/

https://tsuyoshiwada.github.io/sweet-scroll/

** 스크롤 플러그인 : iscroll

https://plugins.jquery.com/jscroll/

** iscroll api 잘 사용 하기 : 

https://m.blog.naver.com/PostView.nhn?blogId=romeoh&logNo=140171004949&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

** passive : 스크롤 이벤트 버블 막는 현상

http://sculove.github.io/blog/2016/12/29/addEventListener-passive/

https://github.com/cubiq/iscroll/blob/master/demos/demoUtils.js

https://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working