jQuery选择器排除子元素

Question

I'm using this click method to reveal additional classes inside a .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
})

Since a .tile may contain links, I'd like to limit the click functionality. I don't want the function to trigger when a link inside .tile is clicked.

Edit: While @antyrant's answer is working for normal links, I noticed in my example the problem persists with on of the links that uses fancyBox.

This is what my HTML looks like:

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

Clicking the download link works fine, but the fancyBox will not work!

Edit 2: See this jsFiddle for a working example.

Answer 1

You need to stop events propagation on child elements, for example:

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

UPDATE: If this can be done as you use some plugins for example you can check if event target has your base class: for example:

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

see jsFiddle demo .

Answer 2

@antyrat is correct, stopping propagation on the anchors will achieve your goal, but that requires binding another event that isn't really necessary. Another option would be to look at the target on the event passed in to your handler.

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

EDIT: Here's a fiddle demonstrating this working using the updated html provided above.

Answer 3

stopPropagation() will stop your child event from bubbling up, and being caught by the listener on the parent element.

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

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

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