Jquery / Javascript - 单击SVG时，在IE上检测到元素外部的单击失败

Question

正如我在网上看到的众多答案版本一样，他们都在chrome / firefox上工作，但在点击svg时不在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.target时显示的元素（及其长度）：

有什么想法吗？

Answer 1

这是一个稍微不同的方法，使用jQuery的.closest()方法检查目标元素是否是容器的子元素：

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');
  }

});

这是一个在IE9 +中测试过的演示 http://jsbin.com/qoqume/edit?html,js,console,output

Answer 2

答案是相应的UserElement属性：

仅限于：https://msdn.microsoft.com/en-us/library/ff971929(v=vs.85).aspx

代替e.target，您应该e.target.correspondingUseElement使用e.target.correspondingUseElement !== 'undefined'