Bind click toggle to image instead of whole div in Masonry

Question

I am using Masonry to toggle the height and width of a div. I have links inside of the expanding div, and I can't figure out how to make it so that the height/width only toggles if an image is clicked instead of anywhere inside the div.

The jQuery:

var $container = $('.masonry').masonry({
    columnWidth: 145,
    itemSelector: '.item',
    "isFitWidth": true
});
$container.on('click', '.item-content', function(){
    $(this).parent('.item').toggleClass('is-expanded');
    $container.masonry();
});

The content loop (WordPress):

<div class="masonry">
    <?php while ($cpts->have_posts()) : $cpts->the_post();
        echo '<li class="item ';
        $cats = get_the_terms($post->ID, 'item_category');
        foreach($cats as $cat){
            echo 'ff-item-type-'.$cat->term_id.' '; 
        }
        echo '">';
        ?>
        <div class="item-content">
            <p class="filter-img" data-id="<?php echo $post->ID; ?>"><?php the_post_thumbnail(); ?></p>
            <?php echo wp_get_attachment_image(get_field('website_image'), array(135,135), false, array('class'=>'site-img')); ?>
            <h4><?php the_title(); ?></h4>
            <?php the_content(); ?>
        </div>
        </li>
    <? endwhile; ?>
</div>

Answer 1

Instead of the $container.on('click') section of JS, I used this:

$('.item-content .filter-img img').on('click', function(){
    $(this).closest('.item').toggleClass('is-expanded');
    $container.masonry();
});  

This way it uses the correct item in the click event and then adds the class to the correct div.

Answer 2

Try applying pointer-events:none for the div. Quoting MDN:

none

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

Update

Assuming the container div is having the class .masonry, add the following in your css

.masonry{
 pointer-events:none;
}

By doing so, click events won't be triggered having the container div as target, only the child elements which are clickable will trigger click events...