使用$（document）.on＆amp;获取DOM元素的ID的mouseenter /鼠标离开

Question

早上好，

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

• 偶尔一：当鼠标进入div时，获取div的ID 进入。
• 场合二：当鼠标离开div时获取ID 把它留下来。

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

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

    },
    mouseleave: function(e) {

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

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

感谢您的帮助！

Answer 1

您可以简单地使用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的元素如何返回没有值（空字符串））：

Answer 2

您可以使用this或e.target.id。有关更多信息，请访问Getting the ID of the element that fired an event

Answer 3

this和e.target都指向目标元素：

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

如果此值为空String，则目标元素没有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 4

您可以使用＆＃34; e.target.id＆＃34;用于访问mouseenter和mouseleave方法中元素的id。