js隐藏div vue_vue实现点击其他地方隐藏div

方法一：

通过监听事件

document.addEventListener('click',function(e){

if(e.target.className!='usermessage'){

that.userClick=false;

}

})

方法二(比较好)：

给最外层的div加个点击事件 @click="userClick=false"

给点击的元素上面加上：@click.stop="userClick=!userClick"

方法三：

点击显示div

...

export default {

methods:{

show(){},

hide(){}

}

}

总结：

通过vue.js 事件的.stop修饰符可以阻止事件继续冒泡传播，也可以使用原生js事件的event.stopPropagation()方法。

通过向指定的div添加.stop，可以实现只有点击非该div内的元素时，才会往上冒泡至page，从而实现点击其他地方隐藏div。

要向触发显示div的按钮添加.stop，否则一点击按钮，触发show()之后传播到page，立马就会触发hide()，div就无法显示。