javascript - 谷歌浏览器中按钮标签的子节点如何触发 onclick 事件？

Question

情况:

1. 使用 document.createElement 创建按钮对象
2. 直接分配onclick事件，例如:button.onclick = showResult;
3. 修改按钮 innerHtml/append img 节点(我都试过了)，在里面放一个放大镜 png 图标。
4. 定义 showResult 函数，它接收 evt 参数，然后尝试获取目标 tagName 属性，但是当您点击图标时，它返回“IMG”而不是“BUTTON”

这是片段:

td = document.createElement( 'td' );
btn = document.createElement( 'button' );
btn.type = "button";
btn.onclick = showResults;
btn.innerHTML = '<img src="../img/mag.png" />';
td.appendChild( btn );

函数

function showResults( evt ) {
    console.log( evt.target.src );
}

我使用这个条件解决了这个问题:

var btn = evt.target == 'BUTTON' ? evt.target : evt.target.parentNode;

但我真的不喜欢它，是否有解决方法或关于此行为的其他方法，您可以指点我一下？

Answer 1

希望对你有帮助

var btn = document.getElementById('btn');
btn.onclick = function(e) {
    clickedButton = e.currentTarget;
    console.log(clickedButton);
}​

检查示例 http://jsfiddle.net/Kohver/RD3Zg/