Question

我有3个元素，都是兄弟姐妹，但它们相互重叠。我想在这些上使用mouseenter / mouseleave，但是，它们不能按预期工作。（只有最顶层的元素才会触发mouseenter / mouseleave）。是否有一个原生的jQuery方法来处理兄弟元素？我想远离检查每个mousemove事件上绑定的每个元素。

----------- OUTER ELEMENT --------------
|                                      |
|  -------  -------                    |
|  |  A  |  |  B  |                    |
|  -------  -------                    |
|                                      |
----------- OUTER ELEMENT --------------

定义为html：

<div class="outerelement"></div><!-- position absolute, etc -->
<div class="a"></div><!-- position absolute, etc -->
<div class="b"></div><!-- position absolute, etc -->

的javascript：

$('div').on('mouseenter mouseleave', function(e) {
    switch (e.type) {
       case 'mouseenter':
         $(this).addClass('hover');
         break;
       case 'mouseleave':
         $(this).removeClass('hover');
         break;
    }
});

jsFiddle here

当A / B正确时，最终发生的是鼠标中心/离开火灾，但它应该为外部元素触发，但它不是....

Answer 1

仅使用win-chrome进行测试。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

    * {
        box-sizing: border-box;
    }

    div.overlay div {
        position:       absolute;
        border:         1px solid rgba(0,0,0,0.25);
        height:         100px;
        z-index:        10;
    }

    div.overlay div.hover {
        background-color:   rgba(0,0,0,0.25);
    }

</style>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
    $(document).on('ready', function(e) {

        var body    = $(this); //.find('body');
        var proxy   = $(this).find('div.overlay');

        var numChildren = 50;
        while (--numChildren) {
            proxy.append(
                $('<div/>').css({
                    'top':  Math.random() * 800,
                    'width':    Math.random() * 800,
                    'height':   Math.random() * 800,
                    'left': Math.random() * 800
                })
            );
        }

        body.on('mousemove', function(e) {

            var children    = proxy.children();
        var x           = e.pageX - window.scrollX;
        var y           = e.pageY - window.scrollY;
            for (var i = 0; i < children.length; ++i) {
                var element = $(children[i]);
                var rect    = element[0].getBoundingClientRect();
                if (rect.contains(x, y)) {
                    if (!element.hasClass('hover')) {
                        element.addClass('hover');
                        element.triggerHandler('truemouseenter');
                    }
                } else {
                    if (element.hasClass('hover')) {
                        element.removeClass('hover');
                        element.triggerHandler('truemouseleave');
                    }
                }
            }
        });

        ClientRect.prototype.contains = function(x, y) {
            return (x >= this.left && x <= this.right && y >= this.top && y<= this.bottom);
        }

    });
</script>
</head>
<body>

    <div class="overlay"></div>

</body>
</html>

mouseenter mouseleave无法正确触发兄弟元素

1 个答案: