jquery中的事件绑定问题

Question

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

如果我们用父母和孩子绑定相同的事件，例如：

     $("#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

Answer 2

即使其他答案在某种意义上是准确的。我认为你的问题是另一个问题。 我认为您正在做的是在mouseenter上突出显示并删除mouseleave上的突出显示，但实际发生的情况则不同。

移动#parent时，您永远不会离开#children。在图片中，如果您将鼠标从左(1)移动到右(5)，则这些是触发事件：

                +-----------------------------------+
                |#parent                            |
                |                                   |
                |                                   |
                |          +-------------+          |
                |          |#children    |          |
                |          |             |          |
          (1)   |    (2)   |     (3)     |   (4)    |   (5)
                |          |             |          |
                |          |             |          |
                |          +-------------+          |
                |                                   |
                |                                   |
                |                                   |
                +-----------------------------------+

1. 没有
2. #parent.mouseenter
3. #children.mouseenter
4. #children.mouseleave
5. #parent.mouseleave

如果是这种情况，则需要修改突出显示逻辑。