jquery如何只允许对分配的div产生影响，而不是对子元素产生影响

Question

我已经对 div 应用了 mouseenter 效果。当您输入 div 时，它会为另一个 div 制作动画。问题是，mouseenter 效果也适用于子 div。如何仅将效果应用于父 div，但为子 div 设置动画？

JS：

$(document).ready(function() {
  $('#slideleft').mouseenter(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "0px",
  top: "0px"
             }, 400 );
  });
  $('#slideleft').mouseleave(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "-700px",
  top: "200px"
             }, 400 );
  });

});

HTML

<div id="slideleft" class="slide"> 

  <div class="inner">Animate this element's left style property</div> 
</div> 



    </div>

Answer 1

要仅将动画应用于外部 div，您可以检查事件的目标以确保它与您在 jQuery 方法中选择的 div 匹配。
http://docs.jquery.com/Events/jQuery.Event#event。 target

您的代码如下所示：

$(document).ready(function() {
  $('#slideleft').mouseenter(function(event) {  // added 'event' as param name
        if ( this == event.target )             // ADD THIS LINE
        {
            var $lefty = $(this).children();
            $lefty.stop().animate({
                                    left: "0px",
                                    top: "0px"
                                  }, 400 );
        }
  });

  $('#slideleft').mouseleave(function(event) {
      // uncomment the below IF statement, if you only want to hide
      //  the inner div when mousing out of the outer div.
      // Otherwise the code as is will hide your div if you mouse out of either
      //  the outer or the inner div

      //if ( this == event.target )
      //{
        var $lefty = $(this).children();
        $lefty.stop().animate({
                                left: "-700px",
                                top: "200px"
                              }, 400 );
      //}
  });

});

PS：示例 HTML 中有一个不必要的额外结束 DIV 标记。

Answer 2

您可以通过不使用 mouseenter/mouseout 事件并使用 jQuery .hover() 来避免孩子们触发 mouseenter/mouseout 事件 函数在你的主 div 上。

jQuery('#slideleft').hover(
        function() {
                // mouse over function
        },
        function() {
                // mouse leave function
        }
);

Answer 3

对子级使用“stopPropagation”，如下所示：

$('#slideleft *').mouseenter(function(event) {        <---- note the asterisk selector
 event.stopPropagation();                        <---- this line
});

这可以防止每个子级的 mouseenter 事件传播到父级。这是它的文档：

http://docs.jquery.com/ Events/jQuery.Event#event.preventDefault.28.29

PS 在 stackoverflow 中保持礼貌非常重要。如果我正确地解释了您上面的一些回复中的一些模棱两可的语气，那么您将来可能需要多考虑一下您的话;-)，:-)