javascript - jquery中的事件绑定(bind)问题

Question

  <div id="parent">
    <div id="children">
    </div>
  </div>

如果我们用相同的事件绑定(bind) parent 和 child :

     $("#parent").live({ mouseenter : Infocus , mouseleave : Outfocus });
     $("#children").live({ mouseenter : Infocus , mouseleave : Outfocus });

现在我的问题是，当我将鼠标移到子项上时，父项也突出显示，有人能告诉我这是怎么回事吗？

Answer 1

您必须使用 stopPropagation() 来防止事件跟随。

function Infocus(e) {
  e.stopPropagation();
  // your code
}

function Outfocus(e) {
  e.stopPropagation();
  // your code
}

阅读 .stopPropagation()

你可以这样做:(可能不尽如人意)

$("#parent").live({
    mouseenter: Infocus,
    mouseleave: Outfocus
});
$("#children").live({
    mouseenter: Infocus,
    mouseleave: Outfocus
});

function Infocus(e) {
    if(this.id == 'parent') {
        $(this).css('background', 'yellow');
    } else if(this.id == 'children') {
        $(this).css('background', 'green');
        $(this).parent().trigger('mouseleave')
    }
}

function Outfocus(e) {
    if(this.id == 'parent') {
        $(this).css('background', 'transparent');
    } else if(this.id == 'children') {
        $(this).css('background', 'transparent');
        $(this).parent().trigger('mouseenter')
    }
}

DEMO