[JS] IOS의 CLICK 버블링이 발생하지 않아요

[JS] IOS의 CLICK 버블링이 발생하지 않아요

 

iOS Safari는 클릭할 수 없는 HTML 요소에 이벤트 버블링이 발생하지 않아요. 

CSS를 이용해서 { cursor: pointer } 속성을 추가하면 이벤트를 버블링합니다. CSS cursor 속성을 모바일 해상도에만 적용하는 방법으로 우회할 수 있겠네요.

 

Raw workarounds(원시 해결방법)

1. ONCLICK : 클릭 할 수없는 요소에 onclick 이벤트를 추가하면 버블링이 발생합니다.

하지만 DOM에 삽입되는 새로운 요소는 이를 지원하기 위해 추가 코드가 필요하기 때문에 이 방법은 좋은 방법이 아닙니다.

 

2. cursor: pointer

클릭 할 수없는 요소의 CSS를 클릭하면 버블링을 발생시킬 수 있습니다.  iOS가 동작을 수정할 때마다 쉽게 제거 할 수있는 코드의 목적을 캡슐화하기 위해 Sass 믹스인을 만들 수 있습니다.

 

이 방법 또한 특정 브라우저의 버그를 수정해야 되기 때문에 좋은 방법은 아닙니다.

 

 

Best Approach

iOS 용 모든 요소에 CSS 수정 사항을 적용하는 것은 터치 장치에 커서가 없기 때문에 깔끔한 수정방법이 아닙니다.

이것은 사용자 에이전트 탐지에 의존하는 핵 옵션이지만 적당히 괜찮습니다.

 

 

 

 

출처 : http://gravitydept.com/blog/js-click-event-bubbling-on-ios