点击父项时触发点击

Question

我正在开发一个Woocommerce产品画廊，该画廊有4个正方形的缩略图，每个缩略图包含尺寸各不相同的图像。图像不能比方形容器宽或高，例如以下示例缩略图：

• 灰色轮廓：容器
• 绿色：填充
• 蓝色：图片

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

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

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

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