admin管理员组

文章数量:1426597

Wondering if someone could please help me understand how to test against the ID value of a element, in a mouse over event. I assume I have to use 'this'.

the value I am getting for ID is "undefined"

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=row{{x.year}} onmouseover="mouseOver()" onmouseout="mouseOut()">
          {{x.year}}
      </td>
      <td>{{x.totalEvents}}</td>
      <td>{{x.customers}}</td>
      <td>{{x.avgDuration}}</td>
</table>

Wondering if someone could please help me understand how to test against the ID value of a element, in a mouse over event. I assume I have to use 'this'.

the value I am getting for ID is "undefined"

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=row{{x.year}} onmouseover="mouseOver()" onmouseout="mouseOut()">
          {{x.year}}
      </td>
      <td>{{x.totalEvents}}</td>
      <td>{{x.customers}}</td>
      <td>{{x.avgDuration}}</td>
</table>

• javascript
• jquery
• html
• angularjs

Share Improve this question Follow edited Apr 17, 2020 at 7:48 Anurag Srivastava 14.5k44 gold badges3737 silver badges4646 bronze badges asked Mar 9, 2020 at 13:38 AmaranthAmaranth 8522 silver badges1212 bronze badges 3

• 3 Your mouseOver function will receive an event object. The element that was moused over is event.target. So, with vanilla js, you could just do const id = event.target.getAttribute('id'); – Jeremy Harris Commented Mar 9, 2020 at 13:40
• 1 @JeremyHarris that's not true when using inline onX attributes, as the OP is. He could pass the event in, or even the id attribute value itself. A better approach would be to use unobtrusive event handlers, though. – Rory McCrossan Commented Mar 9, 2020 at 13:42
• 1 I want to add to what @RoryMcCrossan said since the ment by @JeremyHarris has received so many erroneous upvotes. There is an important difference between the onmouseover attribute and the onmouseover property of an element. The attribute is set by HTML, the property is set by JavaScript. And they behave differently. The attribute is evaluated by the browser as a JavaScript statement. Its functions do not receive event objects. On the other hand the property is evaluated as an event listener function with the first argument being the event. – georgeawg Commented Mar 9, 2020 at 17:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can pass the current dom element directly by passing this inside onmouseover & onmouseout functions like:

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

and then access the element id in js code like:

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

Use ng-mouseenter and ng-mouseleave, and pass the variable x to both:

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

Then in the functions, you can simply use:

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

Use the ng-mouse* Directives

With the AngularJS framework, one should avoid the using the onmouseover attribute. Instead use the ng-mouseover directive. It is integrated with the AngularJS framework and evaluates expressions in the AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

For more information, see

• AngularJS ng-mouseover Directive API Reference
• AngularJS does not have an ng-mouseout Directive
• AngularJS ng-mouseenter Directive API Reference
• AngularJS ng-mouseleave Directive API Reference

---

ng-mouseover with ng-repeat special variables

The ng-repeat directive creates child scopes with special variables set by the directive. One of them is $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);
};

For more information, see

• AngularJS ng-repeat Directive API Reference - Special variable

---

ng-mouseover with $event

Directives like ngMouseover and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object.

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

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

For more information, see

• AngularJS Developer Guide - Expressions - $event

You just need to use the following inforamtion.

In your HTML pass this in the function mouseOver(this)

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

Now in the function use following

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

本文标签： javascriptHow do I test against an elements id value on a mouse over eventStack Overflow