1

我正在使用这个点击方法来显示一个里面的其他类.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 。

4

3 回答 3

5

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

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

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

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

请参阅jsFiddle 演示。

于 2013-10-30T22:29:38.213 回答
0

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

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

编辑：这是使用上面提供的更新的 html 演示此工作的小提琴。

于 2013-10-30T22:34:39.443 回答
0

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

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

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

$('a', $tiles).on('click', function (e) {
    e.stopPropagation(); //Prevents event from bubbling up
})
于 2013-10-30T22:47:24.890 回答