如何针对鼠标悬停事件中的元素 id 值进行测试？

Posted 2023-05-09

【中文标题】如何针对鼠标悬停事件中的元素 id 值进行测试？

【英文标题】：How do I test against an elements id value on a mouse over event?

【发布时间】：2020-06-21 09:54:57

【问题描述】：

想知道是否有人可以帮助我了解如何在鼠标悬停事件中针对元素的 ID 值进行测试。我想我必须使用“这个”。

我得到的 ID 值是“未定义”

function mouseOver() 
  var e = $(this).attr("ID"); //need help with this bit
  if (e == ("row2012")) 
    alert(e)
   else 
    alert(e);
  

<table>
    <tr data-ng-repeat="x in Interruptions">
      <td id=rowx.year onmouseover="mouseOver()" onmouseout="mouseOut()">
          x.year
      </td>
      <td>x.totalEvents</td>
      <td>x.customers</td>
      <td>x.avgDuration</td>
</table>

【问题讨论】：

您的mouseOver 函数将接收一个事件对象。鼠标悬停的元素是event.target。所以，使用 vanilla js，你可以做 const id = event.target.getAttribute('id');

@JeremyHarris 在使用内联 onX 属性时不正确，就像 OP 一样。他可以将事件传递进去，甚至可以传递 id 属性值本身。不过，更好的方法是使用不显眼的事件处理程序。

我想补充一下@RoryMcCrossan 所说的话，因为@JeremyHarris 的评论收到了很多错误的赞成票。元素的onmouseover 属性 和onmouseover 属性 之间有一个重要的区别。属性由 html 设置，属性由 javascript 设置。而且他们的行为不同。 属性 由浏览器评估为 JavaScript 语句。它的函数不接收事件对象。另一方面，property 被评估为一个事件侦听器函数，第一个参数是事件。

【参考方案1】：

您可以通过在onmouseover 和onmouseout 内部传递this 直接传递当前的dom 元素，例如：

<td id=rowx.year onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">x.year</td>

然后在js代码中访问元素id：

function mouseOver(elem) 
  var e = elem.id;
  if (e == "row2012") 
    alert(e)
   else 
    alert(e);
  

【讨论】：

也可以使用onmouseover="mouseOver(window.event)" 而不是function mouseOver(event) var e = event.target.id; // ...

@NiklasE。使用 window.event 会起作用，但不是一个好习惯。应尽可能避免

@RoryMcCrossan 为什么要避免使用window.event？你能引用这个断言的来源吗？

试图为你找到一个，但简而言之，它在 Firefox 版本中的支持是不完整的，它存在的唯一原因是由于 Internet Explorer 中的遗留实现，其他人只采用它来保持兼容性。它从来没有打算作为一个标准来使用。

实际上，如果您查看MDN 的详细信息，它会建议：You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code. Note: This property can be fragile, in that there may be situations in which the returned Event is not the expected value. In addition, Window.event is not accurate for events dispatched within shadow trees.

【参考方案2】：

使用ng-mouseenter 和ng-mouseleave，并将变量x 传递给两者：

<td id=rowx.year ng-mouseenter ="mouseOver(x)" ng-mouseleave="mouseOut(x)">x.year</td>

然后在函数中，你可以简单地使用：

$scope.mouseOver = function(item) 
  var id = `row$item.year`
  ...

【参考方案3】：

使用ng-mouse* 指令

使用 AngularJS 框架，应该避免使用 onmouseover 属性。而是使用 ng-mouseover 指令。它与 AngularJS 框架集成，并在 AngularJS 执行上下文中评估表达式。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

有关详细信息，请参阅

AngularJS ng-mouseover Directive API Reference AngularJS 没有ng-mouseout 指令 AngularJS ng-mouseenter Directive API Reference AngularJS ng-mouseleave Directive API Reference

---

ng-mouseover 和 ng-repeat 特殊变量

ng-repeat 指令使用指令设置的特殊变量创建子作用域。其中之一是$index。

<div ng-repeat="x in arr">
   <p ng-mouseover="mouseOver($index)>x.year</p>
</div>

$scope.mouseOver = function(idx) 
    var x = arr[idx];
    console.log(x.year);
;

有关详细信息，请参阅

AngularJS ng-repeat Directive API Reference - Special variable

---

ng-mouseover 与 $event

像ngMouseover 和ngFocus 这样的指令在该表达式的范围内公开一个$event 对象。当 jQuery 存在时，该对象是 jQuery Event Object 的实例或类似的 jqLite 对象。

<div id="fred" ng-mouseover="mouseOver($event)">
   Ipsum lorem
</div>

$scope.mouseOver = function(ev) 
    console.log(ev.target.id);
;

有关详细信息，请参阅

AngularJS Developer Guide - Expressions - $event

【参考方案4】：

您只需要使用以下信息。

在你的 HTML 中通过函数 mouseOver(this) 传递 this

<td id="1" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">2019</td>

现在在函数中使用以下

function mouseOver(ele) 
  var eleId = $(ele).attr("Id"); //need help with this bit
  if (eleId == "yourid") 
    alert(eleId)
   else 
    alert(eleId);
  

【讨论】：

请记住，this 上下文绑定到元素。将其标记为evt 是用词不当。这会混淆在 onmouseover 属性中评估函数的方式和在 onmouseover 属性中评估函数的方式。