2017-11-10 16 views
0

SVG 요소에 .click() 이벤트를 설정했습니다. Internet Explorer 11에서이를 클릭하면 배경 요소를 클릭한다고 생각합니다. z-index을 사용해 보았지만 행운은 없습니다. 나는 내가 클릭려고 생각하는 요소 로그인이 사용하고 있습니다Internet Explorer 11에서 클릭 이벤트에 대한 SVG 배경 요소 훔치기

내가 CodePen 내 프로젝트에 링크 단지 것 때문에 여기에 포함 된 많은 코드가있다
$(document).click(function(e){ 
    console.log(e.target) 
}) 

:

CodePen Project

온도 오른쪽의 "F"또는 "C"위에 마우스를 올려 놓으면 흰색으로 변합니다. 클릭하면 온도가 섭씨에서 화씨로 변경됩니다. 이러한 작업 중에 돌 세 IE 11 .. 크롬과 파이어 폭스 (놀람)에서 잘

작품

내 생각 엔 뭔가가 포커스를 훔치고 작동 위의 방지이다. 충분히 빠르면 페이지를 새로 고친 직후 IE에서 작동하도록 할 수 있습니다.

건배

답변

1

다음이 답변보다 일반적인 논평 더 때문에이 사전에 appologise해야합니다. 하지만 더 많은 문제에 봉착 할 것이므로주의 할 가치가 있다고 생각합니다.

jQuery를 사용하여 SVG를 조작하는 것은 최선의 선택이 아닙니다. 경우 포인트 :

파이어 폭스와 IE에서
$('.weather-degfht-indicator').animate({ 
    cx: cx, 
    cy: cy 
},500) 

이는 CX/싸이에게 읽기 전용 SVGAnimatedLength하는 원형 요소의 재산을 변경하려는 시도로 이어집니다. 파이어 폭스에서, 함수는 IE에서 무한 루프에 빠지는 것처럼 보입니다. IE에서는 복구 할 수없는 오류가 발생할 수 있습니다 (테스트하지 않았습니다).

쓰기 가능한 속성은 SVGCircleElement.cx.baseVal이며 jQuery는 이에 대해 알지 못합니다.

cx는 CSS 속성 (곧 나오는 SVG 2 spec의 일부)으로 구현되어 있고 SVGCircleElement.style.cx 속성이 존재하며 쓰기 가능하므로 우연히 만 작동합니다.

HTML과 SVG 및 SVG 구현의 차이점과 관련된 모든 함정은 jQuery에서 알 수 없으며 이러한 문제로 인해 더 많은 기능이 예상대로 작동하지 않을 것으로 예상됩니다. 일부는 Chrome에서도 예상대로 작동하지 않습니다. 예를 들어, jQuery가 .createElementNS() 메서드를 사용하지 못하기 때문에 SVG 네임 스페이스에서 새 요소를 만들 수 없습니다.

대신 SVG 인식 프레임 워크를 사용하는 것이 좋습니다. 그러나 나는 그것이 많은 일을 무효로 할 것이고 현실적인 선택이 아닐 수도 있음을 안다.