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
})

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

您需要对子元素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。

Answer 2

@antyrat是正确的，停止在锚点上的传播将实现你的目标，但这需要绑定另一个并非真正必要的事件。另一种选择是查看传递给处理程序的事件的目标。

$tiles.on( 'click', function( e ) {
    if( !$( e.target ).is( 'a' ) ) { // if the element clicked is not an anchor.
        // do stuff
    }
});

编辑：Here's a fiddle使用上面提供的更新的html演示此工作。

Answer 3

stopPropagation（）将阻止您的子事件冒泡，并被父元素上的侦听器捕获。

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

$tiles.on('click', function () {
    console.log('clicked');
})

$('a', $tiles).on('click', function (e) {
    e.stopPropagation(); //Prevents event from bubbling up
})

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

3 个答案: