Vue js 实现点击页面空白处隐藏指定div
<template><!--向页面添加关闭div的事件监听--><div class="page" @click="hide"><!--添加.stop防止page的点击事件触发,导致无法显示div--><button @click.stop="show">点击显示div</button><!--指定的div。添加.stop防止点击div内的元素时,整个div被关闭--><div @click.stop>...</div></div><template><script>export default {methods:{show(){},hide(){}}}</script>
总结:
通过vue.js 事件的.stop
修饰符可以阻止事件继续冒泡传播,也可以使用原生js事件的event.stopPropagation()
方法。通过向指定的div添加.stop
,可以实现只有点击非该div内的元素时,才会往上冒泡至page,从而实现点击其他地方隐藏div。要向触发显示div的按钮添加.stop
,否则一点击按钮,触发show()之后传播到page,立马就会触发hide(),div就无法显示。
如有错误,请指出,谢谢。