我有一个Vue应用程序,它从包含一些块(比如<div class="play-video">...</div>
块)的API请求一些html
通过promise使用axios调用API,它被插入dom中,类似于:
<div v-if="content" v-html="content"></div>
如何将click事件绑定到.play-video
类的子元素?是否只是观察content
的变化,然后运行vanilla js查询 Select 器来绑定它们?
我有一个Vue应用程序,它从包含一些块(比如<div class="play-video">...</div>
块)的API请求一些html
通过promise使用axios调用API,它被插入dom中,类似于:
<div v-if="content" v-html="content"></div>
如何将click事件绑定到.play-video
类的子元素?是否只是观察content
的变化,然后运行vanilla js查询 Select 器来绑定它们?
通过添加@click
处理程序并使用Element.matches()
判断目标元素,可以使用一些事件委派
new Vue({
el: '#app',
data: {
content: null
},
methods: {
handleClick(e) {
if (e.target.matches('.play-video, .play-video *')) {
console.log('Got a click on .play-video or a child element')
}
}
},
mounted () {
// simulate loading content
setTimeout(() => {
this.content = `
<div>
<p>Some other element</p>
<button>I'm not part of <code>.play-video</code></button>
<div class="play-video">
<p><button>Click me, I am!</button></p>
</div>
</div>
`
}, 1000)
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<div v-if="content" v-html="content" @click="handleClick"></div>
<p v-else>Loading...</p>
</div>
如果只想捕捉.play-video
元素本身而不是其任何子元素上的单击事件,请将 Select 器更改为仅'.play-video'
.
有关浏览器兼容性和polyfill(如果需要)的信息,请参见https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill.