跨浏览器获取点击HTML元素值的差异及兼容解决方案咨询

嘿，这个问题我之前也踩过坑！核心原因其实是事件冒泡机制加上不同浏览器对点击目标的判定逻辑差异，至于Chrome的“随机性”其实是个小误会——你点击的位置不同，target就会变：点到<span>文本上时target是SPAN，点到按钮的空白区域（比如padding或者边框）时target是BUTTON，Chrome只是对点击区域的判定更敏感而已，Firefox的表现反而更稳定。

要解决这个跨浏览器的问题，关键是别用e.target，而是用指向事件绑定元素本身的属性，推荐两个靠谱方案：

方案1：使用e.currentTarget #

e.currentTarget在事件处理过程中，永远指向你绑定事件的那个元素（也就是这里的<button>），不管你点击的是它的子元素还是自身。修改后的代码如下：

<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>

<script>
$(function () { 
  $('button').on("click", show); 
}); 

function show(e) { 
  const button = e.currentTarget;
  $("#data").append(`${button.nodeName}, ${button.value}<br>`);
}
</script>

方案2：使用jQuery的$(this) #

在jQuery的事件处理函数里，this默认指向绑定事件的DOM元素，你也可以用jQuery的方法来获取属性，写法更灵活：

function show(e) { 
  // 原生DOM属性写法
  $("#data").append(`${$(this)[0].nodeName}, ${$(this).val()}<br>`);
  // 或者更简洁的jQuery方法写法
  // $("#data").append(`${$(this).prop('nodeName')}, ${$(this).val()}<br>`);
}

这两个方案都能保证不管你点击按钮的哪个区域（包括内部的span），都能稳定获取到按钮的nodeName和value，完美解决Chrome和Firefox的差异问题。

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