如何阻止元素中的所有事件影響其余的DOM

Question

我正在為我的站點創建一個簡單的文本編輯器。 當按下按鈕時，它將表情符號添加到輸入中。 我試圖停止與表情符號選擇器的任何交互，使輸入失去焦點。

基本上，我希望有某種方法可以在元素及其所有子元素上使用.stopPropogation（）。

可能沒有辦法做到這一點。

popup.addEventListener("click", (e)=>{
  console.log('clicked')
  e.stopPropagation()
})

這不行

Answer 1

您將要使用vue的內置refs ：

 new Vue({ el: '#app', data() { return { text: '' } }, methods: { addEmoji() { this.text += ':)'; this.$refs.textareaX.focus(); } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" v-cloak> <textarea v-model="text" ref="textareaX"></textarea> <button @click="addEmoji">add smile</button> </div> 

這樣，您就可以充分利用vue的優勢，而不必嘗試退出並設置自己的偵聽器（當vue重新渲染時，可以並將其重置）