javascript - jQuery选择器排除子元素

我正在使用这种click方法来显示.tile中的其他类

var $tiles = $('.tile');

$tiles.on('click', function(){
    var $this = $(this);
    $this.toggleClass('large'); // change layout of tile
    $this.children('.details').toggle(); // display additional info
})

由于.tile可能包含链接，因此我想限制点击功能。我不希望单击.tile内的链接时触发该函数。

编辑：@antyrant的答案适用于普通链接时，我在示例中注意到使用fancyBox的链接上的问题仍然存在。

这是我的HTML外观：

<div class="tile">
    <ul class="details">
        <li><a class="download"> href="#">Download</a></li>
        <li><a class="fancybox-media" href="#">Video</a></li>
    </ul>
</div>

单击下载链接可以正常工作，但是fancyBox将不起作用！

编辑2：有关工作示例，请参见此jsFiddle。

最佳答案

您需要在子元素上stop events propagation，例如：

$tiles.find( 'a' ).click( function( e ) {
    e.stopPropagation();
});

更新：
如果例如在使用某些插件时可以完成此操作，则可以检查event target是否具有您的基类：例如：

$('.tile').on('click', function ( e ) {
    if( !$( e.target ).hasClass( 'tile' ) ) {
        return true;
    }
    //...

参见jsFiddle demo。

关于javascript - jQuery选择器排除子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19695001/