Question

我在<tr>上设置了onmouseover，但只要鼠标悬停在每个<td>上，鼠标悬停就会触发，无论子元素悬停，如何在鼠标悬停时触发一次？

<tr id="result0" onmouseover="highlighttext(1,8)">
   <td class="paratd">1</td>
   <td class="keywordtd">PO</td>
   <td>Do you need to post registry?</td>
</tr>

当1悬停在“1”计数1次鼠标悬停时，当我悬停在“po 再次计算鼠标悬停（现在变为2计数），当我徘徊在“你需要发布注册表吗？”再次，它再次计数（现在3个数）。

其他信息：我如何设置鼠标悬停属性：

newtr.setAttribute("onmouseover","highlighttext(1,"+j+")")

j表示循环运行编号，只是想用它来将参数传递给highlighttext函数。

然后这就是我对highlighttext（）的编码方式：

function highlighttext(wordtype,wordnum){
    console.log(wordtype,wordnum)

}

更新：好吧，我尝试在codepen上传它，但它最终把我当作垃圾邮件..

Answer 1

这是正确的，mouseover和mouseout事件将针对子元素的每次/我们的交互触发。

在您的情况下，您应该使用onmouseenter事件，该事件不会多次触发同一父容器中的子节点：

<tr id="result0" onmouseenter="highlighttext(1,8)">
   <td class="paratd">1</td>
   <td class="keywordtd">PO</td>
   <td>Do you need to post registry?</td>
</tr>

注意，为了获得更好的结果，具体取决于您的样式，您可能需要在表格上设置border-collapse: collapse;。

Javascript OnMouseOver由标签没有火元素元素

1 个答案: