javascript - 我只能从控制台调用点击 function 按钮。 按钮不点击

Question

最近我从一个网站聘请了一位女士来帮助我进行特定设计（我再也找不到她了）。 我采用了该设计并在服务器端工作并完成了我的 web 应用程序。 客户要求在图像上有一个灯箱缩放选项。 我使用了很多方法，但似乎无法从前端触发点击事件，我只能从浏览器控制台使用“image.click()”方法。 这是一个 html 代码片段：

<div class="row">
<div class="col-6" style="text-align: center; margin: auto;">
<img class="img-fluid img-thumbnail" style="cursor: pointer;"src="img-src">
</div>
</div>
<div id="lightbox" class="lightbox"><img src=""></div>

我想对多张图片做缩放效果

Array.from($('.img-fluid')).forEach(image => {
$(image).click(function (e) {
        e.preventDefault();
        $('#lightbox img').attr('src', $(image).attr('src'))
        $('#lightbox').toggle()
    });
})

唯一可行的方法是当我使用带有点击方法的浏览器控制台时。

关于原因有什么建议吗？

Answer 1

根据文档：

HTMLElement.click()方法模拟鼠标点击元素。

所以，如果你想在用户点击图片时触发事件，正确的方法是使用onclick方法。

当用户单击一个元素时，将引发click事件。 它按顺序在 mousedown 和 mouseup 事件之后触发。

或者您可以添加一个EventListener ，这取决于您的需要。