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

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