在第二个（右/ bing）表条目中，我理解了为什么从映像悬停到“ bing”字符串会导致触发bingfn()。
但是第一个（左侧/谷歌）表在onmouseover中具有<td>，因此，我希望从图像到文本并向后悬停不会导致计数器增加。为什么计数器增加？在项目组合（在这种情况下为<a>，<img>和一些文本）中使用单个<br />是否有问题？
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<h3>On Mouse Over in tables</h3>
<table>
<tr>
<td onmouseover="googlefn()">
<a href="http://google.com/">
<img width="100" src="google.jpg">
<br />
Google
</a>
</td>
<td>
<p onmouseover="bingfn()">
<a href="http://bing.com/">
<img width="100" src="bing.jpg"><br />
Bing</a></p>
</td>
</tr>
<tr>
<td id="gcountarea">G.count</td>
<td id="bcountarea">B.count</td>
</tr>
</table>
<script>
var gcount = 0;
var bcount = 0;
function googlefn() {
document.getElementById("gcountarea").innerHTML = gcount+=1;
}
function bingfn() {
document.getElementById("bcountarea").innerHTML = bcount+=1;
}
</script>
</body>
</html>
最佳答案
之所以增加，是因为当您将鼠标移到图像/链接上时，它将触发新的mouseover，并且由于event bubbling而重新计数。
我更新了脚本，以在计数之前检查鼠标停留在哪些元素上，并将事件从mouseover更改为mouseenter，因此当鼠标从图像/重新输入td / p时，该事件不计数链接。
更新
根据要求（希望），我使脚本更具动态性，因此通过将data-counter属性添加到元素中，为其提供一个类似于googlecounter的值，然后使用相同的值（googlecounter）作为一个id元素，计数器应写入的内容，瞧……：）
var els = document.querySelectorAll('[data-counter]');
for (i=0; i < els.length; i++) {
els[i].hitcounter = 0;
els[i].addEventListener("mouseenter", function(e){
if(e.target.hitcounter != undefined) {
e.target.hitcounter++;
document.getElementById(e.target.getAttribute('data-counter')).innerHTML = e.target.hitcounter;
}
});
}<h3>On Mouse Over in tables</h3>
<table>
<tr>
<td id="td" data-counter="googlecounter">
<a href="http://google.com/">
<img width="100" src="google.jpg">
<br />
Google
</a>
</td>
<td>
<p id="p" data-counter="bingcounter">
<a href="http://bing.com/">
<img width="100" src="bing.jpg"><br />
Bing</a></p>
</td>
</tr>
<tr>
<td id="googlecounter">G.count</td>
<td id="bingcounter">B.count</td>
</tr>
</table>关于javascript - 在表格单元格上设置onmouseover，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35469110/