Vue img标签绑定click事件
使用事件代理进行实现,可以在根标签中定义一个事件监听方法,当监听到img标签时执行方法,具体代码如下:html<template><div class="l-header" @click="proxyImage"><slot name="left"><img id="left" slot="left" ...
·
使用事件代理进行实现,可以在根标签中定义一个事件监听方法,当监听到img标签时执行方法,具体代码如下:
template
<template>
<div class="l-header" @click="proxyImage">
<slot name="left">
<img id="left" slot="left" src="../../static/back.png" alt="">
</slot>
</div>
</template>
js
<script>
export default {
methods: {
proxyImage: function (e) {
console.log(e.target)
if (e.target.tagName.toUpperCase() === 'IMG') {
// 这里是需要执行的方法
}
}
}
}
</script>
上述方法可以实现功能,但在实际的开发中页面中往往存在多个相同名称的标签,容易产生冲突,解决方法是将想要绑定的标签加上Id属性,然后在proxyImage
方法中将条件改为e.target.id === 'left'
即可,注意left
为自定义的id。
更多推荐
已为社区贡献2条内容
所有评论(0)