Question

我遇到了以下问题。

我得到了一个div，里面装满了不同的元素，并且有一个mouserover事件。我需要在mouseover-function中使用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）上使用mouseover事件。使用您提供的示例，如果 .outer div 有填充，会发生什么？即使我们没有完全悬停在 .inner div 上，事件仍会触发。所以我会改变附加一点的事件并使用jQuerys .closest-method返回到父div：

＆＃13;

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"));
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

喜欢这个吗？

我不明白为什么你不能使用父母

嗯，你可以通过使用＆＃34;这个＆＃34;

来获取当前的侦听器对象

＆＃13;

$(".outer").on("mouseover", function(event){
  var obj = $(this);
  
  console.log(obj.hasClass("outer"))
});

＆＃13;

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

＆＃13;

<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 class="outer">
  <div class="inner">
      <div>
        <div>
          <div>
            <div class="someclass">
              <div>
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                deeeeeeeep inside
              </div>
            </div>
          </div>
        </div>
    </div>
    there
  </div>                                         
 </div>

＆＃13;

Answer 3

希望，这对你有用：

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

.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>

Answer 4

使用this

的event.target版本

此触发当前选择器。

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

Answer 5

您是否尝试过event.currentTarget

示例：http://codepen.io/camtullos/pen/bgQNoa?editors=1111

$(".outer").on("mouseover",function(event){
  console.log(event.currentTarget.className);
});

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

5 个答案: