使用 $(document).on & mouseenter/mouseleave 获取 DOM 元素的 ID

Question

早上好，

我目前正在寻找一种解决方案来两次获取 DOM 元素 ID。

场合一：当鼠标进入一个div时得到div其ID 进入。
场合二：当鼠标离开a时div获取该id div它离开了。

它是动态内容，因此我有以下基本代码：

$(document).on({
    mouseenter: function(e) {

    },
    mouseleave: function(e) {

    }
}, '.template-builder-template-stream-slot');

但是，在上述两种情况下，我在获取元素的实际 ID 时遇到了问题。

感谢您的帮助！

Answer 1

this和e.target都引用了目标元素：

var id = e.target.id;
var id = this.id;

如果此值为空字符串，则目标元素没有 id 属性。

您可以通过记录目标元素来验证情况是否如此：

$(document).on({
    mouseenter: function(e) {
        console.log(this); // logs a DOM element
        console.log(this.id); // logs the id if present, or blank otherwise.
    }
}, '.template-builder-template-stream-slot');

Answer 2

您可以简单地使用 this.id，假设您的 .template-builder-template-stream-slot 元素在触发此代码时实际上有一个 ID。如果没有 ID，结果将为空。

$(document).on({
    mouseenter: function(e) {
      console.log("mouseenter on #" + this.id);
    },
    mouseleave: function(e) {
      console.log("mouseleave on #" + this.id);
    }
}, '.example');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure class="example" id="one">This has an ID of "one".</figure>
<figure class="example" id="two">This has an ID of "two".</figure>
<figure class="example">This has no ID at all.</figure>

如果我们将光标从上到下移到这两个上，我们将在 JavaScript 控制台中得到以下结果（请注意最后一个没有 ID 的元素，returns 无值（空字符串））：

Answer 3

您可以使用 "e.target.id" 访问 mouseenter 和 mouseleave 方法中元素的 id。

Answer 4

您可以使用 this 或 e.target.id。更多内容请访问Getting the ID of the element that fired an event

使用 $(document).on & mouseenter/mouseleave 获取 DOM 元素的 ID

Getting ID of DOM Element using $(document).on & mouseenter/mouseleave

javascript

asp.net

jquery

dom