1

我有 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在这里

最终发生的是 mouseenter/leave 在正确超过 A/B 时触发，但它应该为外部元素触发，但它不是......

4

1 回答 1

0

仅使用 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>
于 2013-06-15T19:59:37.963 回答