어제 크롬 73버전이 배포되자마자 bx-slider를 사용한 슬라이더에 링크가 작동하지 않는다는 전달을 받고 확인해보니 bx-slider 내 링크를 클릭하면 클릭 부분의 최하위 요소부터 이벤트 버블링이 일어나는게 아니라 bx-slider가 만들어낸 .bx-viewport부터 이벤트가 시작되어 그보다 하위에 있는 링크로 이동되지 않는 문제가 있었다.

touchstart 이벤트로 발생시킬때는 문제가 없었는데 데스크톱 페이지라 해당사항 없었고 일단 빠른 조치로 똑같이 bx-slider를 쓰지만 같은 문제가 발생하지 않은 페이지의 bx-slider 버전인 4.1.2로 교체했다.

그리고나서 bx-slider를 버전별로 확인해보니 일단 크롬73버전 이상에서는 4.2.2부터 4.2.14버전까지 해당 오류를 포함한 여러 오류가 발생한다. 근데 정식 릴리즈 버전이 아닌 4.2.1d(추후 4.2.15에 반영될 것으로 보이는 버전)에서는 해당 문제가 발생하지 않아 수정된 부분을 보니 딱 한줄 변경되었다.

-- slider.originalClickTarget = orig.originalTarget;
++ slider.originalClickTarget = orig.originalTarget || orig.target;

orig 변수는 var orig = e.originalEvent이니 e.originalEvent.originalTarget이 있다는건데 크롬 콘솔로 찾아봐도 이 부분은 없고 크롬 73으로 업데이트해서 그런가 싶어 문제가 발생하지 않았던 72버전에서 확인해봐도 해당 요소는 없다.
4.2.1d에서 추가된 e.originalEvent.target은 원했던 클릭 지점의 최하위 요소를 찍어주니 크롬에서는 반드시 들어가 있어야 했던 코드. slider.originalClickTarget이 undefined이니 클릭 이벤트가 실행되지 않아야 하는게 틀리진 않은거 같은데 그동안은 왜 작동되었지 의문이 든다. 확인해보니 파이어폭스에는 event.originalEvent.originalTarget이 존재한다. 크롬72까지는 event.originalEvent.originalTarget이 undefined인데 어떻게 문제없이 작동되는지 의문..

19/05/07

다른 프로젝트에 같은 문제가 발생하여 팀 동료가 더 나은 해결맙방법을 찾아냈다. 옵션에 touchEnabled: false를 추가. (단, touch 활성화를 중단하므로 모바일에선 해결되지 않음)

FROM : Links in sliders aren’t working - Error in the latest version of Chrome (73.0.3683.75)