关于javascript: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()
    },
}

这样点击预览图标就能够触发大图预览了：