JS 触发元素点击事件

一般情况下我们只是给dom元素绑定相关事件，等待用户触发。但是最近遇到一个情况，需要使用js手动触发元素的click事件，来看下具体情况。

起因是一个上传组件

选择图片后上传后，鼠标悬浮到上面是下面的样式：

图片展示用的是element ui的大图预览组件：

现在遇到的问题就是，上边覆盖了一个蒙层，点击小眼睛图标无法触发大图预览的事件。

猜测，只要找到大图预览的元素，手动触发它的click事件，即可触发大图预览模式。

JS手动触发 element.click()

<div v-if="url" class="wrap">
    <el-image
        class="avatar"
        :id="url.split('/').at(-1)"
        :src="url"
        :preview-src-list="[url]">
    </el-image>
    <div class="shadow">
      <i class="el-icon-view" @click="handlePreview(url.split('/').at(-1))"></i>
      <i class="el-icon-delete" @click="handleRemove"></i>
    </div>
</div>

methods: {
    handlePreview(id) {
      document.getElementById(id).click()
    },
}

这样点击预览图标就可以触发大图预览了：