克隆DOM元素后无法获取修改后的ID及点击事件获取ID失效问题求助

嘿，我来帮你排查下这个问题！你遇到的情况其实是前端开发里克隆元素时很容易踩的两个小坑，咱们一步步来解决：

问题1：点击事件绑定不上 #

你原来的代码里，克隆完元素后立刻用querySelector去找clone-xxx元素，但这时候你还没把克隆的元素cln添加到DOM树里呢！DOM里根本不存在这个元素，所以btn会是null，自然绑定不上点击事件。

解决办法：直接给你手里的cln对象绑定事件就行，不用再去DOM里查询——毕竟你刚克隆完这个元素，直接操作它最靠谱。

问题2：点击后event.target.id为空 #

event.target指的是你实际点击到的那个具体元素，如果你的克隆元素（cln）里面还有子元素，点击子元素的时候，target就会是那个子元素，而子元素没有设置id，所以输出空值。

解决办法：用event.currentTarget代替event.target。currentTarget永远指向绑定点击事件的那个元素（也就是你的克隆div），不管你点击的是它本身还是它的子元素，都能拿到正确的id。另外如果用普通函数作为事件处理函数，也可以直接用this.id，效果是一样的。

修改后的完整代码 #

// 克隆目标元素
var draggedElement = this.template.querySelector("[id='"+divId+"']");
var cln = draggedElement.cloneNode(true); // 第二个true参数在现代浏览器可选，深克隆所有子元素

// 批量添加class，更简洁
cln.classList.add('completed', 'box-height');
cln.id = 'clone-' + divId;

// 直接给克隆元素绑定点击事件
cln.addEventListener('click', function(event){
    console.log('Button Clicked');
    // 用currentTarget确保拿到克隆元素的id
    console.log(event.currentTarget.id);
    // 或者用this.id（普通函数里this指向绑定事件的元素）
    // console.log(this.id);
});

// 最后再把克隆元素添加到DOM
event.target.appendChild(cln);

额外小提示 #

• cloneNode(true)已经会深克隆所有子元素和它们的事件（如果是通过HTML属性绑定的事件，比如onclick），但如果是通过addEventListener绑定的事件，克隆的时候不会带过去，所以咱们手动绑定是对的。
• 如果你的事件处理函数用了箭头函数，this不会指向绑定事件的元素，这时候一定要用event.currentTarget来获取元素。

内容的提问来源于stack exchange，提问作者Sonali Sharma