jquery - 单击父级时触发单击

Question

我正在开发一个 Woocommerce 产品库，该库有 4 个方形缩略图，每个缩略图都包含尺寸差异很大的图像。图像不能比其方形容器更宽或更高，如示例缩略图所示:

• 灰色轮廓:容器
• 绿色:填充
• 蓝色:图像

现在您必须单击图像而不是其方形容器才能显示相关幻灯片。当您获得有关铅笔宽度的图像时，这会导致很多挫败感。在将图像缩小太多之前，我已经添加了最大量的填充以增加可点击区域，并且没有 <a>我可以操纵的标签。这只是图像。

<ol class="flex-control-thumbs">
    <li>
        <img>
    </li>
</ol>

我想到了触发 <img> 上的点击通过向父 li 添加 .click() 函数，但这给了我一个“超出最大调用堆栈大小”。错误。

jQuery(document).click(function() {
    ...

    // Simulate click on img
    jQuery(".flex-control-thumbs li").find("img").trigger("click");
});

有没有办法将可点击区域“扩展”到整个缩略图，而不仅仅是图像，或者可以通过使用 jQuery 单击容器来模拟单击图像？

修复后已编辑:

jQuery(document).on("click", ".flex-control-thumbs li", function() {
    ...

    // simulate click
    event.stopPropagation();
    jQuery(this).find("img:not(.flex-active)").trigger("click");
});

Answer 1

试试这个:你可以在 li 元素上添加点击监听器，当你点击图像时，它会遍历到父 li

jQuery(document).on("click", ".flex-control-thumbs li", function() {
    alert("clicked");
});