方法一:  

  通过监听事件

document.addEventListener('click',function(e){
if(e.target.className!='usermessage'){
that.userClick=false;
}
})

方法二(比较好):

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

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

实现点击页面其他地方,隐藏div(vue)的更多相关文章

  1. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  2. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  3. jquery实现点击页面其他地方隐藏指定元素

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  4. jQuery 实现点击页面其他地方隐藏菜单

    点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...

  5. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  6. 点击页面其它地方隐藏该div的方法

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  7. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  8. 点击页面任何位置隐藏div

    <include file="Public:header" /> <style type="text/css"> table{width ...

  9. JS如何实现点击页面其他地方隐藏菜单?

    方法一: $("#a").on("click", function(e){  $("#menu").show();    $(documen ...

  10. jquery点击页面其他位置隐藏div

    $("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...

随机推荐

  1. vue-cli项目打包出现空白页和路径错误问题

    vue-cli项目打包: 1. 命令行输入:npm  run  build 打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目. 第一个问题,文件引用路径.我们直接运行打包后的文件夹 ...

  2. poj 1469 COURSES (二分匹配)

    COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16877   Accepted: 6627 Descript ...

  3. (转)linux sort,uniq,cut,wc命令详解

    linux sort,uniq,cut,wc命令详解 sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些 ...

  4. 【题解】NOI2016区间

    Two - pointer 第一题…… 大概就是对于一段连续的区间求解,使用两个指针不断卡区间的长度直到区间不满足条件吧. 这题只要对区间以长度从小到大排一下序,然后使用两个指针指向区间.线段树维护被 ...

  5. 洛谷 P4175 [CTSC2008]网络管理 解题报告

    P4175 [CTSC2008]网络管理 题目描述 带修改树上链的第\(k\)大 输入输出格式 输入格式: 第一行为两个整数\(N\)和\(Q\),分别表示路由器总数和询问的总数. 第二行有\(N\) ...

  6. CodeForces - 158B.Taxi (贪心)

    CodeForces - 158B.Taxi (贪心) 题意分析 首先对1234的个数分别统计,4人组的直接加上即可.然后让1和3成对处理,只有2种情况,第一种是1多,就让剩下的1和2组队处理,另外一 ...

  7. 关于xml文件头部xmlsn

    样本: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://ww ...

  8. ACE自适配通信环境简介

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/03/580795.html ACE自适配通信环境 (Adaptive Communicatio ...

  9. HDU 5538 (水不水?)

    House Building Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  10. swift的UIbutton

    override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, ...