关于鼠标事件：jQuery：mouseenter / mouseleave事件停止传播


jQuery: mouseenter/mouseleave even stop propagation

我在无序列表的

  • 的jquery中使用mouseenter和mouseleave事件，以在鼠标移过它们时显示一些图像。该列表通常如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <ul class="myTree">
        <li class="treeItem" catid="1" catname="Category 1">
            <img src="img/fleche_hori.png" class="expandImage"/>
            Category 1
            <img src="img/cross.png" class="hidden removecategory"/>
           
    <ul>

                <li class="treeItem" catid="2" catname="Subcategory 1 1">
                    <img src="img/spacer.gif" class="expandImage"/>
                    Subcategory 1 1
                    <img src="img/cross.png" class="hidden removecategory"/>
               
    </li>

                <li class="treeItem" catid="3" catname="Subcategory 1 2">
                    <img src="img/spacer.gif" class="expandImage"/>
                    Subcategory 1 2
                    <img src="img/cross.png" class="hidden removecategory"/>
               
    </li>

           
    </ul>

       
    </li>

        <li class="treeItem" catid="4" catname="Category 2">
            ...
       
    </li>


    </ul>

    注意：我知道可能很难阅读，但是我尽力使它尽可能易读。

    因此，您可以看到它只是用于展开/折叠树的树，每个项目都标记有" treeItem"类。我需要保留该类，因为这是所有这些项目共享的一个通用类，当鼠标悬停在这些项目上时需要显示图像，所以我决定将事件处理程序绑定到该类。

    需要在mouseenter / mouseleave上显示/隐藏的图像是每个项目的第二个(带有src =" img / cross.png"的项目)。我用这个脚本很容易做到这一点：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $(document).on("mouseenter",".treeItem", function (e) {
        //e.stopPropagation();
        $(this).children(".removecategory").show();
    });

    $(document).on("mouseleave",".treeItem", function (e) {
        //e.stopPropagation();
        $(this).children(".removecategory").hide();
    });

    我的问题是，当展开一个项目时(例如，"类别1"被展开，并且现在显示"子类别1 1"和"子类别1 2")，并且用鼠标悬停了任何子类别，这些子类别的图像将按要求显示，但父类别的图像(即"类别1")不会隐藏，因为我也仍将其悬停...

    我尝试使用e.stopPropagation();但这没什么更好的..

    任何人都知道一种解决此问题的方法，并且当我悬停元素的某些内容时会在元素上触发mouseleave吗？

    您可以查看http://api.jquery.com/mouseleave/#example-0，尤其是代码块下方的演示，以了解我的意思。通常(在演示的右侧)，我希望当鼠标进入黄色容器时触发蓝色容器的mouseleave事件。

    我希望我的问题很清楚，因为很难解释...

    编辑：

    我找到了一种将mouseenter事件处理程序修改为此的方法：

    1
    2
    3
    4
    5
    6
    $(document).on("mouseenter",".treeItem", function (e) {
        $('.removecategory').each(function() {
            $(this).hide();
        });
        $(this).children(".removecategory").show();
    });

    但这并不完美，因为我需要离开整个父项(即"类别1"项)，然后重新输入该项，以在悬停子项后再次显示图像。

    如果有人有更好的方法，请分享！

    将跨度添加到每个类别和子类别：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <ul class="myTree">
        <li class="treeItem" catid="1" catname="Category 1">
            <img src="img/fleche_hori.png" class="expandImage"/>
            <span class="Item">Category 1</span>
            <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
           
    <ul>

                <li class="treeItem" catid="2" catname="Subcategory 1 1">
                    <img src="" class="expandImage"/>
                    <span class="Item">Subcategory 1 1</span>
                    <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
               
    </li>

                <li class="treeItem" catid="3" catname="Subcategory 1 2">
                    <img src="img/spacer.gif" class="expandImage"/>
                    <span class="Item">Subcategory 1 2</span>
                    <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
               
    </li>

           
    </ul>

       
    </li>

        <li class="treeItem" catid="4" catname="Category 2">
            ...
       
    </li>


    </ul>
    ?

    将您的JS更改为此：

    1
    2
    3
    4
    5
    6
    7
    $('.Item').mouseover(function(){
        $(this).next(".removecategory").show();
    });

    $('.Item').mouseout(function(){
        $(this).next(".removecategory").hide();
    });?

    http://jsfiddle.net/xBwyZ/3/

    相关讨论