【问题标题】:Jquery not selector problemJquery不是选择器问题
【发布时间】:2009-12-21 20:31:10
【问题描述】:

首先感谢您的考虑。

我有一个 html 文档,里面有一个包装器(容器)。我想这样当有人点击页面的正文部分时,他们会被重定向到 xxx,但是如果他们点击包装器(页面的内容),他们不会被重定向。我已经尝试了所有方法,但 $('body') 的 jquery 选择器选择了正文中的所有内容,我似乎不明白如何选择不在#wrapper 中的所有内容。 我正在尝试这样的事情:

$('*').not('#wrapper').click(function(){
            window.location = 'http://www.example.com/example-page';
        });

没有运气,

谢谢大家

亚历克斯_

【问题讨论】:

  • 应该是:$('body > *').not('#wrapper')

标签: jquery xhtml jquery-selectors


【解决方案1】:

由于事件冒泡,您应该能够将点击事件附加到包装器,以取消对主体的冒泡。之后,您可以将 click 事件附加到 body 元素以将其重定向到您需要的位置。这只会将点击事件绑定到 2 个元素。

$("#wrapper").click(function(){
    return false;
});

$("body").click(function(){
    console.log("body click");
});

【讨论】:

    【解决方案2】:
        $('*').not('#wrapper').click(function(){
                window.location = 'http://www.merkados.com/quote-request';
        });
    

    会将事件绑定到除#wrapper 之外的所有元素。所以,如果你的 html 是

       <div id="anotherdiv"><div id="wrapper">adsads</div></div>
    

    #anotherdiv 将收到点击广告。您可以将 stopPropagation() 用于事件

    【讨论】:

    • 我认为如果我更好地理解 stopPropagation() 方法,这可能会起作用......我将对其进行研究。谢谢
    【解决方案3】:

    stopPropagation() 是否适用于 IE 风格?也许,最后使用旧的“return false”可以阻止事件到达其他地方。

    此外,一些奇怪的代理检查 - 已经在 J​​Query 中可用 - 应该做。 (如果是 MSIE,那么做

    event.cancelBubble = true;
    

    否则,使用 stopPropagation 方法

    event.stopPropagation();
    

    )

    【讨论】:

    • 嗯,好吧,现在,我将不得不放弃 IE 版本...但是谢谢...
    【解决方案4】:

    大概是这样的..

    $(document).click(function(e){
        var el = $(e.target);
        if ( 
            (!$(el).is('#wrapper') ) &&
            $(el).closest('#wrapper').length === 0 
        ) {
            window.location.href = 'http://msn.com';
        }
    });
    

    没有测试。不过,我完全不推荐这种做法,因为这是一种侵入性和奇怪的行为。

    【讨论】:

    • 真的吗?你确定吗?我刚刚使用.container 而不是#wrapper 在stackoverflow 上对其进行了测试,它似乎有效。可以放个测试页吗?
    • 顺便测试一下,如果可以的话,在你的#wrapper 周围加上一个边框,并确保它包含浮动。
    【解决方案5】:

    我想你想用这个:

    $(':not(#wrapper)').click(function(){
        window.location = 'http://www.example.com/example-page';
    });
    

    【讨论】:

    • 难道这还不能解释#wrapper 的孩子吗?因为它将点击事件处理程序附加到多个元素上,这不是效率低下吗?
    • 我同意 Meder 的观点,这选择了很多东西......不过还是谢谢
    【解决方案6】:

    我做到了,伙计们! 非常感谢你让我大开眼界!你们做到了! 这是最终代码:

    $(':not(#wrapper)').click(function(event){
                if($(this).hasClass('cl')) {
                    window.location = 'http://www.example.com/example-page';
                }
                  event.stopPropagation();
    
            });
    

    如您所见,我只是在正文中添加了一个类。 stopPropagation 基本上停止来自#wrapper 的调用,因此它基本上只适用于具有 cl 而不是#wrapper 的主体部分。

    再次感谢,你们摇滚!!

    【讨论】:

    • 你能提供标记吗?我仍然对为什么我的不起作用感到困惑:p
    【解决方案7】:

    也许尝试使用过滤功能。它允许您从元素集中去除不需要的结果。

    http://docs.jquery.com/Traversing/filter

    【讨论】:

    • 我试过这个,看起来很有希望......但最后它只是过滤了整个事情。所以它没有重定向。谢谢老兄。
    猜你喜欢
    • 2010-10-09
    • 2011-04-04
    • 2011-10-31
    • 2010-12-01
    • 2010-11-25
    相关资源
    最近更新 更多