如何从 IE 11 中的事件获取父元素的属性？

Question

我有以下，它在 chrome 和其他浏览器中有效，但在 IE 11 中无效。我不确定此代码的哪一部分 IE 不支持。在所有其他浏览器中，我在控制台日志中得到 svgimageclicked 但在 IE 中得到错误：

unable to get property 'getAttribute" of undefined or null reference

<div id='content' data-attribute="svgimageclicked"> 
  <svg .......
</div>

document.getElementById('content')
  .addEventListener('click', this.handle_click.bind(this));

handle_click(event){
   console.log(event.target.parentElement.getAttribute('data-attribute'); 
}

Answer 1

试试这个例子：

var el = event.target.parentElement;
var v = getAttribute(el, "data-attribute");

function getAttribute (dom, attr) {
            if (dom.getAttribute !== undefined) {
                return dom.getAttribute(attr);
            } else if (dom[attr] !== undefined) {
                return dom[attr];
            } else if (dom.getAttributeNode !== undefined) {
                return dom.getAttributeNode(attr);
            }else{
                  return null;
            }
        }

Answer 2

我尝试测试您的代码，发现它在其他浏览器中也出现错误。

我建议尝试参考下面的示例，它适用于大多数浏览器，包括 IE 浏览器。

<!doctype html>
<html>
   <head>
   </head>
   <body>
      <div  id='content' data-attribute="svgimageclicked">
         <svg height="100" width="100">
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
            Sorry, your browser does not support inline SVG.  
         </svg>
      </div>
      <script>
         document.getElementById('content').addEventListener('click', handle_click);
         
         function handle_click(event)
         {  
            var target = event.currentTarget;
                        var parent = target.parentElement.nodeName;
                console.log(target.getAttribute('data-attribute')); 
         }  
          
      </script>
   </body>
</html>

在 IE 11 浏览器中的输出：

如何从 IE 11 中的事件获取父元素的属性？

How to get parent element's attribute from event in IE 11?

html

javascript

internet-explorer-11