在Vue组件中获取全局的点击事件方法

使用场景:

在Vue组件中点击某元素之外的地方移除该元素

需求:

如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们点击“下拉菜单”以外的区域隐藏下拉菜单。

解决方法一:

出现“下拉菜单”的同时,建一个透明的遮罩层,然后只有“下拉菜单”可以点,点击遮罩层就隐藏。

缺点:z-index层数要控制好,还有就是如果点击其他功能按钮,会失效,因为有遮罩层,导致要点击两次才有效。

解决方法二:

局部监听,给“列表组件”最外层的盒子加个点击事件,隐藏下拉菜单。并且对“下拉菜单”的事件要阻止事件冒泡。

缺点:点击“列表组件”区域有效,点击“菜单组件”和“导航组件”区域无效。

解决方法三(推荐):

第一步:定义Vue全局点击函数

// 定义全局点击函数
Vue.prototype.globalClick = function (callback) {
 document.getElementById('main').onclick = function () {
 callback();
 };
};

tips:

1、参数为点击的回调函数。

2、Vue中通过getElementsByTagName获取不到body节点,还不知道是什么原因。

第二步:在组件中监听全局的点击事件

mounted: function () {
 this.globalClick(this.moreSetupMenuRemove);
}

tips:mounted是Vue生命周期钩子中的DOM渲染完成阶段。

第三步:进行操作

// 移除操作
moreSetupMenuRemove () {
 this.$refs.moreSetupMenu.style.display = 'none';
},

如果有更好的方法,欢迎交流!

以上这篇在Vue组件中获取全局的点击事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2018-09-05

Vue入门之数量加减运算操作示例

本文实例讲述了Vue入门之数量加减运算操作.分享给大家供大家参考,具体如下: 效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList" :key="key.id"> {{key.id}},{{idx}} <template> <button class="cut" @click="cu

vue中子组件向父组件传递数据的实例代码(实现加减功能)

这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

vue父组件点击触发子组件事件的实例讲解

最近在学习Vue父子组件通信的问题,刚好遇到一个父子之间事件事件派发与接收,在这里记录一下,在这里我使用的是ref 给子组件注册引用信息.官网是这样解释的 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例: 父组件app.vue <template> <div id="app"> <!--父组件--> <

vue 的点击事件获取当前点击的元素方法

首先 vue的点击事件 是用 @click = "clickfun()" 属性 在html中绑定的, 在点击的函数中 添加$event 参数就可以 比如 <button @click = "clickfun($event)">点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } }, 以上这篇vue 的点击事件获取当前

vue如何获取点击事件源的方法

整理文档,搜刮出一个vue如何获取点击事件源的方法,稍微整理精简一下做下分享. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>vue click事件获取当前元素对象</title> <script src="http://cdnjs.cloudflare.com/ajax/libs

vuejs响应用户事件(如点击事件)

需求: 页面上的列表原先有3个,我们想点击一次添加一条记录,也可以在头和尾删除数据: 我们也可以删除我们想删除的任意一行记录: 如果是用传统的jquery操作,页面中js会特别多,而且操作也很麻烦. 这里用vue.js就非常简单. 我们先看页面效果: 页面初始化.png 末尾增加一项.png 删除项.png 再来看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

Vue监听事件实现计数点击依次增加的方法

1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播. 效果如下: 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>计数器自增函数</title> <script src="vue.js"></s

vue实现商品加减计算总价的实例代码

需求是商品只能选一次,有原价和现价. 大概的效果图是这样: 完整代码在这里,直接复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html{ background: rgb(214

vue数据操作之点击事件实现num加减功能示例

本文实例讲述了vue数据操作之点击事件实现num加减功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue num加减</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></scrip

vue绑定的点击事件阻止冒泡的实例

当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc

解决vue 绑定对象内点击事件失效问题

突然的发现某段 html 代码中点击事件失效了. 仔细观察才发现,这段代码内的元素都在 vue 绑定对象中. 因此失效. 解决办法是将绑定对象内的元素点击事件换成 v-on:click. 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

重新认识vue之事件阻止冒泡的实现

冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div>

zepto.js中tap事件阻止冒泡的实现方法

本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法.分享给大家供大家参考.具体如下: 最近在弄一个手机版的网站,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js 由于移动网页中使用click事件会有延迟,所以就用上了zepto.js中的tap事件. 使用click事件可以使用stopPropagation来阻止冒泡,但tap使用该方法无效 现在我需要实现这样一个效果:点击a.btn这个按钮,然后显示div.panel,当我点击非div.panel时隐藏div.

vue.js click点击事件获取当前元素对象的操作

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码

Layui组件Table绑定行点击事件和获取行数据的方法

一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

JS实现点击事件统计的简单实例

JS实现网站点击事件的统计功能. 点击事件上报,分为立即上报和延时上报,延时上报通过cookie存储. 一.配置参数,主要用于定义上报的一些配置信息.通过在外部定义_clickc对象重置参数. 参数名称       类型          默认值             说明     selector:      string        '_click_rp'        点击触发的选择器,支持ID.class     prefix:        string        '_rp_'

使用 Vue 绑定单个或多个 Class 名的实例代码

一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <template> <div id="app"> <!-- 因为是自定义属性,所以要用到 v-bind ,简写为 : --> <!-- 3.将 box 绑定给 div --> <div :class="box"></div> </div> </template> &

js点击事件的执行过程实例分析【冒泡与捕获】

本文实例讲述了js点击事件的执行过程.分享给大家供大家参考,具体如下: js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡. 首先看下当我们点击一个元素后,浏览器的执行过程. 1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流 2,这个事件流顺着dom层级,一层一层向下找,直到遇到了触发事件的目标元素,这个查找的过程是捕获阶段 说明:捕获阶段,在查找每一层dom