跨浏览器获取单击的 html 元素的值时的差异

Question

$(function ()
{
	 $('button').on("click", show);
});
function show(e)
{
$("#data").append(e.target.nodeName+', ');
$("#data").append(e.target.value+'<br>');
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="btn" value="test">
<span>click here</span>
</button>
<div id="data">
</div>

在Chrome和Firefox中测试上述代码。两者都给出了不同的结果。

当使用 jquery 将click事件附加到按钮并获取单击元素的值时，Firefox 和 chrome 会给出不同的结果。请注意，按钮元素内部包含一个范围。

我正在检测元素并使用event.target.nodeName和event.target.value获取值。

请在Firefox和chrome中看到这个jsfiddle。两者都给出了不同的结果。

什么是最好的跨浏览器解决方案。 请帮忙

编辑：有趣的是，此代码的chromes行为是随机的。每次刷新后，chrome 中的输出可能会更改。

Answer 1

只需使用 JQuery$(this)选择器，您就不必担心 Firefox/Chrome 。

此外，如果您希望元素的属性value，.val()在这里为您服务，但如果您需要文本，请使用.text().

$(function() {
$('button').on("click", function() {
$("#data").append('<p>'+this.nodeName + '</p><p>'+$(this).text() + '</p>');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" value="test">
<span>click here</span>
</button>
<div id="data">
</div>