前言
採用 jQuery 引用 $(document).click() 的來監聽整份文件的點擊事件
文件內有其他子項目的點擊處理 $('.myButton').click()
那麼以 Vue 的相對處理方式為何? (範例為 Vue 2.x 版本)
監聽事件
在 mounted 加入 document.addEventListener, 事件為 click, callback 為在 Vue 的定義的 onClick 方法
document.addEventListener('click', this.onClick);
在 Vue 的使用如下
new Vue({
...
methods: {
onClick() {},
buttonClick() {}
}
mounted() {
document.addEventListener('click', this.onClick);
},
beforeDestroy() {
document.removeEventListener('click', this.onClick);
},
...
});
注意在 HTML 的 Vue click 事件, 需要加上 .stop (它等同於 event.stopPropagation())
這會防止觸發它以外的事件
<button @click.stop="buttonClick">點我</button>
Vue 的 Event Modifiers 除了常用的 .prevent (等同於 event.preventDefault()) 及上面提及的 .stop 之外
還有 .capture, .self, .once, .passive 等事件修飾符
詳細文件可以參考 Event Handling
