Question

我有一个div，当你用鼠标输入它时会预览一个正在显示的图像 - 当你鼠标移动它再次隐藏它时。

我想要实现的是当你点击它动画并显示的那个div时，我想解开'鼠标保留'的功能，使图像停留在不起作用的屏幕上 - mouseleave是还在踢......你能帮忙吗？

这是我的代码

$('.attachment').on({
    mouseenter: function (e) {
        tileID = (this.parentNode.id).substring(13);
        $('#imageContainer-' + tileID).css('visibility', 'visible');
        $('#imageContainer-' + tileID).css('overflow-y', 'hidden');
        $('#imageContainer-' + tileID).stop().animate({
            height: 40
        }, {
            duration: 300,
            easing: animationEasing,
            queue: false
        });

    },
    mouseleave: function (e) {
        $('#imageContainer-' + tileID).stop().animate({
            height: 0
        }, {
            duration: 300,
            easing: animationEasing,
            queue: false,
            complete: function () {
                $('#imageContainer-' + tileID).css('visibility', 'collapse');
            }
        });

    },
    click: function () {

        $('#attachmentLink-' + tileID).unbind('mouseleave');

        $('#imageContainer-' + tileID).stop().animate({
            height: 610
        }, {
            duration: 300,
            easing: animationEasing,
            queue: false,
            complete: function () {
                $('#imageContainer-' + tileID).css('overflow-y', 'auto');
            }
        });
    }
});

HTML代码供参考：

 <div id="timelineContainer">

        <div id="timelineTopHider"></div>
        <div id="timelineBottomHider"></div>

        <ul class="timeline">

            <li id="timelineLI-1">

                <div class="timelineIcon letter"></div>

                <div class="dateContainer">

                    <p>
                        12th July 2013<br>
                        17:13
                    </p>

                </div>

                <div class="timelineTile" id="timelineTile-1">

                    <a href="javascript:animateTile('1');" class="fillDiv"></a>

                    <div class="tileTitleContainer" id="tileTitleContainer-1">
                        <span title="This is a really long title to test the application of text ellipsis and should concatenate the string">Test Title</span>
                    </div>

                    <div class="details" id="details-1">
                        <table>
                            <tr>
                                <td>Name:</td>
                                <td>Full Name</td>
                            </tr>
                            <tr>
                                <td>Type:</td>
                                <td>Credit</td>
                            </tr>
                        </table>

                    </div>

                    <div class="arrow" id="arrow-1"></div>

                    <div class="attachment" id="attachmentLink-1"></div>



                    <div class="slideUpInfo" id="slideUpInfo-1">

                        <p>
                            Name<br>
                            Info<br>
                            12th July 2013, 17:13
                        </p>

                    </div>

                    <div class="iconContainer hidden">
                        <a href="javascript:toggleImageContainer(1);" id="iconContainerLink-1">
                            <img src="images/attachment.png" /></a>
                    </div>

                    <div class="imageContainer hidden" id="imageContainer-1">

                        <img src="images/documents/1.png" />

                    </div>

                </div>

            </li>

            </ul>

        </div>

Answer 1

您需要使用off：

$("#id").click(function(){
     $("#id").off("mouseleave");
});

请参阅http://api.jquery.com/off/

Answer 2

请尝试以下操作：

  $("#id").click(function(){
     $("#id").unbind("mouseleave");
  });

Answer 3

使用unbind，在click处理程序中添加以下代码并检查

$(this).unbind('mouseleave');

Answer 4

你真的不想取消绑定事件你想要做的是使mouseenter和mouseleave事件有条件，即给.attachment元素一些属性，比如status =“clicked”，当点击它时见例子：< / p>

$('.attachment').on({
        mouseenter: function (e) {
            if($('.attchment').attr('status') != 'clicked'){
                tileID = (this.parentNode.id).substring(13);
                $('#imageContainer-' + tileID).css('visibility', 'visible');
                $('#imageContainer-' + tileID).css('overflow-y', 'hidden');
                $('#imageContainer-' + tileID).stop().animate({
                    height: 40
                }, {
                    duration: 300,
                    easing: animationEasing,
                    queue: false
                });
            }
        },
        mouseleave: function (e) {
            if($('.attchment').attr('status') != 'clicked'){
                $('#imageContainer-' + tileID).stop().animate({
                    height: 0
                }, {
                    duration: 300,
                    easing: animationEasing,
                    queue: false,
                    complete: function () {
                        $('#imageContainer-' + tileID).css('visibility', 'collapse');
                    }
                });
            }
        },
        click: function () {

            console.log('clicked ' + tileID);
            $('.attchment').attr('status','clicked');

            $('#imageContainer-' + tileID).unbind('mouseleave');

            $('#imageContainer-' + tileID).stop().animate({
                height: 610
            }, {
                duration: 300,
                easing: animationEasing,
                queue: false,
                complete: function () {
                    $('#imageContainer-' + tileID).css('overflow-y', 'auto');
                }
            });

        }
    });

如果不再处于点击模式，请确保更改/删除状态。

Answer 5

修正了它!!!

道歉 - 我将div与实际图像解除绑定，而不是解开mouseenter和mouseleave的div。

我修改了我的代码，所以它现在正在运行

如何使用jquery取消绑定mouseleave

5 个答案: