jQuery - 如何使用 stopPropagation()

发布于 2024-08-06 05:34:37 字数 554 浏览 12 评论 0原文

我以前做过这个，但我很难让它工作...

我需要以下 jquery 具有 .stopPropagation 函数，这样如果用户将鼠标悬停在三个元素上太快，动画就不会变得疯狂！

    $(function () {
            var tabContainers = $('div.subMenu > div');
            tabContainers.hide();

            $('.mainMenuDiv a').hover(
            function (e) {
                tabContainers.filter(this.hash).slideDown();
                e.stop();
            },
            function(e){
                tabContainers.filter(this.hash).slideUp();
                e.stopPropagation();
            });
    });

原文

I've done this before, but I'm having trouble getting this to work...

I need the following jquery to have a .stopPropagation function, so the animation won't go crazy if the user hovers over three elements too quickly!

    $(function () {
            var tabContainers = $('div.subMenu > div');
            tabContainers.hide();

            $('.mainMenuDiv a').hover(
            function (e) {
                tabContainers.filter(this.hash).slideDown();
                e.stop();
            },
            function(e){
                tabContainers.filter(this.hash).slideUp();
                e.stopPropagation();
            });
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

总以为 2024-08-13 05:34:37

听起来您正在寻找 stop 函数来取消任何不完整的动画。

$('.mainMenuDiv a').hover(
    function (e) {
        tabContainers.filter(this.hash).stop().slideDown();
    },
    function(e){
        tabContainers.filter(this.hash).stop().slideUp();
    }
);

或者如果您希望“回滚”任何正在进行的动画，请尝试：

$('.mainMenuDiv a').hover(
    function (e) {
        tabContainers.filter(this.hash).stop(true, true).slideDown();
    },
    function(e){
        tabContainers.filter(this.hash).stop(true, true).slideUp();
    }
);

查看文档了解更多信息。

Sounds like you are looking for the stop function that cancels any incomplete animations.

$('.mainMenuDiv a').hover(
    function (e) {
        tabContainers.filter(this.hash).stop().slideDown();
    },
    function(e){
        tabContainers.filter(this.hash).stop().slideUp();
    }
);

or if you'd like any in-progress animation(s) to be "rolled back" try:

$('.mainMenuDiv a').hover(
    function (e) {
        tabContainers.filter(this.hash).stop(true, true).slideDown();
    },
    function(e){
        tabContainers.filter(this.hash).stop(true, true).slideUp();
    }
);

Check out the docs for more info.

回复收藏 0 原文

梦年海沫深 2024-08-13 05:34:37

使用 stopPropagation() 和 stopImmediatePropagation() 时要小心，就好像它们是同一件事一样：

Event.stopPropagation() 方法会阻止事件对象移动到下一个节点，但仅限于该节点上的任何其他事件侦听器之后允许当前节点执行。
Event.stopImmediatePropagation() 方法还会阻止事件对象移动到下一个节点，但不允许当前节点上的任何其他事件侦听器执行。

回复收藏 0 原文

何以畏孤独 2024-08-13 05:34:37

$(function () {

        var tabContainers = $('div.subMenu > div');
        tabContainers.hide();

        $('.mainMenuDiv a').hover(function () {

            tabContainers.filter(this.hash).dequeue().slideDown();

        },function () {

            tabContainers.filter(this.hash).dequeue().slideUp();

        });

});

希望这有帮助。 ;) 事件从子元素“冒泡”到其所有父元素，您可以使用 event.stopPropragation(); 或 event.stopImmediatePropagation()。然而，要停止动画，您需要dequeue()。

$(function () {

        var tabContainers = $('div.subMenu > div');
        tabContainers.hide();

        $('.mainMenuDiv a').hover(function () {

            tabContainers.filter(this.hash).dequeue().slideDown();

        },function () {

            tabContainers.filter(this.hash).dequeue().slideUp();

        });

});

Hope that this helps. ;) Events “bubble up” from the child element to all its parents, and you would event.stopPropragation(); or event.stopImmediatePropagation(). However to stop animation you dequeue().

回复收藏 0 原文

少跟Wǒ拽 2024-08-13 05:34:37

我可能是错的，但这可能有效：

$(function () {
    var tabContainers = $('div.subMenu > div');
    tabContainers.hide();
    $('.mainMenuDiv a').hover(function() {
        tabContainers.filter(this.hash).stop().slideDown();
    },function() {
        tabContainers.filter(this.hash).stop().slideUp();
    });
});

I could be wrong, but this might work:

$(function () {
    var tabContainers = $('div.subMenu > div');
    tabContainers.hide();
    $('.mainMenuDiv a').hover(function() {
        tabContainers.filter(this.hash).stop().slideDown();
    },function() {
        tabContainers.filter(this.hash).stop().slideUp();
    });
});

回复收藏 0 原文

~没有更多了~