使用event.target.getAttribute()返回值爲null

<g id="blocklyDraggable_1" class="draggable"onmousedown="selectElement(event)">
	<rect x="50" y="20" width="100" height="60" style="fill: blueviolet;" />
</g>

 function selectElement(event){
            console.log("select element");
            // var el=event.target;
            // var id=el.getAttribute('id');
            var id=event.currentTarget.id;
            var useElem=document.createElementNS("http://www.w3.org/2000/svg","use");
            console.log("id: " + id);
            useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id);
            var canvas=document.getElementById("blocklySvg");
            canvas.appendChild(useElem);
        }

問題描述

• 我在g標籤上綁定了selectElement(event)函數，想在g元素收到點擊事件的時候使用use標籤複製一個新的g元素，setAttributeNS需要傳遞一個原有的g元素的id，原本是通過event.target獲取id，但是調getAttribute(‘id’)返回值爲空
• 我嘗試過換成getAttributeNS，但是都沒有用，打印出來的值還是爲null

原因

• 使用event.target返回的是觸發事件的元素

解決方案

• event.currentTarget返回綁定事件的元素

但是我還是不知道這兩者區別，先記錄一下吧