javascript - google chrome中按钮标签的子节点如何触发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/