javascript - 如何获取用作事件选择器的元素

Question

我遇到了以下问题。

我有一个 div，里面充满了不同的元素，并且有一个鼠标悬停事件。我需要在鼠标悬停功能中使用 div 。问题是我无法通过它的类选择 div，因为有许多自动创建的具有相同类的 div。

我尝试使用event.target，但它返回用作选择器的对象。

$(".outer").on("mouseover",function(event){
  alert("event.target.className is: " + event.target.className);
});

.inner{
  background-color:#ccc; 
  min-width:100px;
  width:100%;
  min-height:100px;
  height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
  <div class="inner">
    here
  </div>                                         
 </div>

有什么方法可以在鼠标悬停时获取 div outer 而不通过它的类选择它吗？

我也不能只使用 $(event.target).parent() 因为动态创建的外部 div 内可能有更深的嵌套结构

Answer 1

我理解这个问题的方式是你真的想在 .inner div(s) 上使用鼠标悬停事件。根据您提供的示例，如果 .outer div 有填充，会发生什么？即使我们根本没有将鼠标悬停在 .inner div 上，该事件仍然会触发。所以我会稍微改变附加的事件并使用 jQuerys .closest-method返回到父级 div:

var $container = $(".outer");
$container.on("mouseover", ".inner", function(event) {
  console.log($(this).closest(".outer").attr("class"));
  // or since in this case you know it's the same element:
  // console.log($container.attr("class"));
});

.outer {
  padding-top: 30px;
  background: Red;
}
.inner {
  background-color: #ccc;
  min-width: 100px;
  width: 100%;
  min-height: 100px;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    here
  </div>
  <div class="inner">
    here 2
  </div>
</div>