用于排除子元素的JQuery选择器

Question

我正在使用此单击方法来显示其中的其他类 .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
})

由于a .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.

Answer 1

您需要停止子元素上的事件传播,例如:

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

更新: 如果这可以在您使用某些插件时完成,例如您可以检查是否event target有您的基类:例如:

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

看到jsFiddle演示.