borderradius가있는 요소에서 이벤트를 무시합니다.

Question

보이는 원을 클릭하지 않았을 때 경계 반경 50 % (원) 인 div에서 click/touchstart 이벤트를 무시하고 싶습니다 (div의 모서리를 클릭 할 때). . 지금까지

http://codepen.io/anon/pen/zhwri

:

난 당신이 사업부의 코너를 클릭하면 확인 (그것이 지금은 괜찮에 대한 해결 방법입니다, 100 % 정확한입니다) 정말 간단한 함수를 썼다 않았다 너무 좋아,

문제 :

원 (.circle) -webkit이-변환 (예를 들어, 변환과 회전합니다 (회전 45deg) 이제 기능이 제대로 (아마도 때문에 상자의 작동하지 않습니다 모델 등) f에 어떤 방법이있다. div가 순환 게재 될 때 구석에서 클릭했는지 여부를 확인하십시오. 왜냐하면 좌표는 상자 모델 (내가 추측하는)을 참조하기 때문에 클라이언트가 보는 것과 다릅니다.

잘하면 내 질문은 분명하다, 어쩌면 거기에 내 기능에 제안 된 방법을 그림 다른 방법이 있을까요?

도움 주셔서 감사합니다!

업데이트 :이 경우 SVG에 그에게 잊었 또는 모두를 위해이 제안하는 사람들 있도록 캔버스, 옵션 (불쌍 :()되지 않습니다 : 당신이 바로,하지만 불행히도 옵션 :(

Answer 1

I을 당신이 d3.js 라이브러리 http://d3js.org/으로, 예를 들어, 캔버스 요소를 사용하는 것이 좋습니다, 원과 같은 복잡한 모양을 선택 (및 이벤트를 감시)하는 것이 훨씬 간단 할 것입니다.

Answer 2

문제는 이러한 진술 함께

eToParent['x'] = e.originalEvent.touches[0].clientX - $(e.target).offset().left; 
eToParent['y'] = e.originalEvent.touches[0].clientY - $(e.target).offset().top; 

.offset()은 CSS 변형 (예 : rotate(45deg))을 고려하지 않습니다. 예를 들어, 요소의보고 된 오프셋에 수동으로 회전을 적용해야합니다.