Jquery/Javascript - SVG를 클릭할 때 IE에서 요소 외부 클릭 감지가 실패함 (Jquery/Javascript - Detecting a click outside an element fails on IE when clicking an SVG)

문제 설명

Jquery/Javascript ‑ SVG를 클릭할 때 IE에서 요소 외부 클릭 감지가 실패함 (Jquery/Javascript ‑ Detecting a click outside an element fails on IE when clicking an SVG)

온라인에서 본 다양한 버전의 답변에서와 같이 svg를 클릭할 때 chrome/firefox에서는 모두 작동하지만 IE에서는 작동하지 않습니다(예: 다음 스니펫).

$(document).on("click",(e) => {
    this._handleDocumentClick(e);
});

_handleDocumentClick(e) { 
    let container = $(".myClass");

    if (container.has(e.target).length === 0) { 
        alert('clicked outside');
    }
}

IE에서는 다음과 같은 경우 작동하지 않습니다. SVG(아마도 이미지에도 있음)를 클릭하면 svg가 내 요소 내부에 있고 여전히 외부를 생각합니다!

이는 내가 e를 인쇄할 때 표시되는 요소(및 길이)입니다. 대상:

아이디어가 있습니까?

참조 솔루션

방법 1:

Here’s a slightly different approach, checking to see if the target element is a child of the container using jQuery’s .closest() method:

var $container = $('.target');

$('body').on('click', function(evt) {
  var $target = $(evt.target);

  if ( $target.closest($container).length ) { 
    console.log('❌ click inside');
  }
  else {
    console.log('✅ click outside');
  }

});

Here’s a demo, tested in IE9+ http://jsbin.com/qoqume/edit?html,js,console,output

방법 2:

The answer was the correspondingUseElement property:

In ie only:https://msdn.microsoft.com/en‑us/library/ff971929(v=vs.85).aspx

Instead of e.target, you should use e.target.correspondingUseElement in case e.target.correspondingUseElement !== 'undefined'

(by omriman12、Ted Whitehead、omriman12)

참조 문서

1. Jquery/Javascript ‑ Detecting a click outside an element fails on IE when clicking an SVG (CC BY‑SA 2.5/3.0/4.0)