綁定單擊切換到圖像而不是砌體中的整個div

Question

我正在使用石工來切換div的高度和寬度。 我在擴展div內有鏈接，但我不知道如何制作它，因此高度/寬度僅在單擊圖像時才切換，而不是在div內的任何位置切換。

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

內容循環（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

嘗試對div應用pointer-events:none 。 報價MDN：

沒有

元素永遠不是鼠標事件的目標； 但是，如果鼠標后代的指針事件設置為其他值，則鼠標事件可能以其后代元素為目標。 在這些情況下，鼠標事件將在事件捕獲/冒泡階段期間按適當的方式在此父元素上觸發事件偵聽器，以使其進入/流出后代。

更新資料

假設容器div具有.masonry類，請在CSS中添加以下內容

.masonry{
 pointer-events:none;
}

這樣一來，以容器div為目標的點擊事件將不會被觸發，只有可點擊的子元素才會觸發點擊事件...

Answer 2

我沒有使用JS的$container.on('click')部分，而是這樣做的：

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

這樣，它在click事件中使用了正確的項目，然后將該類添加到正確的div中。