javascript - 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')
    }
}

演示

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

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