精华内容
下载资源
问答
  • Vue 监听鼠标点击事件和指定按钮+点击事件![ ](https://img-blog.csdnimg.cn/20201101144415447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4...

    Vue 监听鼠标点击事件和指定按钮+点击事件!
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./js/vue.min.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<!-- 普通点击触发方法-->
    			 <button @click="bds()">点击</button>
    			 <!-- 普通按钮点击触发一次事件 -->
    			 <button @click.once="once()">点击触发一次事件</button>
    			 <!-- 点击 + ctrl 触发的方法 -->
    			 <button @click.ctrl="a()">click.ctrl</button>
    			 <!-- 点击+shift 触发方法 -->
    			 <button @click.shift="b()">click.shift</button>
    			 <!-- 点击.ctrl.f1 -->
    			 <button @click.ctrl.f1="c()">click.ctrl.f1</button>
    			 
    			 <!-- 点击鼠标左键触发事件-->
    			 <button @click.left="left()">点击鼠标左键触发</button>
    			  <!-- 点击鼠标右键触发事件-->
    			 <button @click.right="right()">点击鼠标右键触发</button>
    			
    		</div>
    		<script>
    			let app=new Vue({
    				el:"#app",
    				data:{
    					
    				},
    				methods:{
    					bds:function(){
    						alert(22);
    					},
    					a:()=>{
    						alert("点击+ctrl 触发了该方法!");
    					},
    					b:()=>{
    						alert("点击 + shift 触发的方法!");
    					},
    					c:()=>{
    						alert("点击 +click.ctrl.f1 触发的方法!");
    					},
    					once:()=>{
    						alert("被点击了!");
    					},
    					left:()=>{
    						alert("点击了鼠标左键触发事件 !");
    					},
    					right:()=>{
    						alert("点击鼠标右键触发事件!");
    				   },
    				  
    					
    				}
    			});
    		</script>
    	</body>
    </html>
    
    
    
    展开全文
  • Vue 事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。v-on:click 单击事件 + + - - v-on:dblclick 双击事件 + + - - v-on:mousemove\mouseout 鼠标事件{{ x }} - {{ y }}new Vue({...

    Vue 事件处理方法

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    v-on:click 单击事件

    + +

    - -

    v-on:dblclick 双击事件

    + +

    - -

    v-on:mousemove\mouseout 鼠标事件

    {{ x }} - {{ y }}

    new Vue({

    el:".vue-app",

    data:{

    age: 25,

    x:0,

    y:0

    },

    methods:{

    add:function(inc){

    this.age += inc;

    },

    subtract:function(dec){

    this.age -= dec ;

    },

    update:function(event){

    // console.log(event);

    this.x = event.offsetX;

    this.y = event.offsetY;

    }

    }

    });

    然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

    Vue.js 事件修饰符

    在事件处理程序中尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

    为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

    .stop

    .prevent

    .capture

    .self

    .once

    .passive

    Stop

    + +

    blog.023xs.cn

    注意事项:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    Vue 按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    全部的按键别名:

    .enter

    .tab

    .delete (捕获“删除”和“退格”键)

    .esc

    .space

    .up

    .down

    .left

    .right

    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名,当然也可以通过全局 config.keyCodes 对象自定义按键修饰符别名。

    补充知识:vue给同一元素绑定单击click和双击事件dblclick,执行不同逻辑

    在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面,但是不管怎么样,总是执行单击事件

    解决办法:利用计时器,在大概时间模拟双击事件

    html部分代码:

    v-for="(item,index) in items" :key="index"

    @click="storageCount(item.id)"

    @dblclick.native="storageDetail(item.id)"

    class="inline-cell"

    :class="colors[item.status]">

    {{item.id}}

    .native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。

    官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native

    js部分代码

    import desDialog from './dialog';

    import detailDialog from './detailDialog';

    var time = null; // 在这里定义time 为null

    export default {

    name: 'storeTable',

    components: {

    desDialog,

    detailDialog

    },

    props: ['providerid'],

    data() {

    return {

    colors: ['space', 'isBuy'],

    showDialog: false,

    showDialogT: false

    };

    },

    methods: {

    // 单击事件函数

    storageCount(id) {

    clearTimeout(time); //首先清除计时器

    time = setTimeout(() => {

    this.showDialog = !this.showDialog;

    const obj = {};

    obj.cutname = id;

    obj.providerid = this.providerid;

    this.$store.dispatch('GetStorageCount', obj);

    }, 300); //大概时间300ms

    },

    // 双击事件函数,清除计时器,直接处理逻辑

    storageDetail(id) {

    clearTimeout(time); //清除

    this.showDialogT = !this.showDialogT;

    const obj = {};

    obj.cutname = id;

    obj.providerid = this.providerid;

    this.$store.dispatch('GetStorageDetail', obj);

    },

    close() {

    this.showDialog = false;

    },

    closeT() {

    this.showDialogT = false;

    }

    }

    };

    以上这篇vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持易采站长站。

    展开全文
  • 主要介绍了vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本文主要介绍VUE移动端监听鼠标滑动事件,模拟实现用户在规定事件内无操作自动退出的场景。 App.vue文件 <template> <div id="app" @mousemove="moveEvent" @click="moveEvent"> <keep-alive> ...

    本文主要介绍VUE移动端监听鼠标滑动事件,模拟实现用户在规定事件内无操作自动退出的场景。

    App.vue文件

    <template>
      <div id="app" @mousemove="moveEvent" @click="moveEvent">
        <keep-alive>
          <router-view v-if="$route.meta.keepalive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepalive" />
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          // 用户超时定时器
          timmer: null
        };
      },
      methods: {
        /**
          监听鼠标滑动和点击事件,重置页面用户未操作超时时间
         */
        moveEvent() {
          let path = ["/login"];
          if (!path.includes(this.$route.path)) {
            clearTimeout(this.timmer);
            this.init();
          }
        },
        /**
          用户超时定时器 30分钟
         */
        init() {
          this.timmer = setTimeout(() => {
            this.$router.push({
              path: "/login",
            });
          }, 1000*60*30);
        },
      },
    };
    </script>
    
    
    
    
    展开全文
  • Vue 事件处理方法 可以用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。 v-on:click单击事件 <buttonclass="btnbtn-info"v-on:click="add(1)">++</button> <buttonclass="btnbtn-...

    Vue 事件处理方法

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    v-on:click 单击事件

    <button class=" btn btn-info"  v-on:click="add(1)"> + + </button>
     <button class=" btn btn-danger " v-on:click="subtract(1)"> - - </button>

    v-on:dblclick 双击事件

    <!-- 缩写语法 -->
     <button class=" btn btn-info"  @dblclick="add(5)"> + + </button>
     <button class=" btn btn-danger " @dblclick="subtract(5)"> - - </button>

    v-on:mousemove\mouseout  鼠标事件

    <div class="canvas" @mouseout ="update">
         {{ x }} - {{ y }}
    </div>
    new Vue({
    el:".vue-app",
    	data:{
    	    age: 25,
    		x:0,
    		y:0
    	},
    	methods:{
    		add:function(inc){
    		      this.age += inc;
    		},
    		subtract:function(dec){
    		   this.age -= dec ;
    		},
    		update:function(event){
    		 //   console.log(event);
    		   this.x = event.offsetX;
    		   this.y = event.offsetY;
    		}
    	}
    });	

    然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

    Vue.js 事件修饰符

    在事件处理程序中尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

    为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

    .stop

    .prevent

    .capture

    .self

    .once

    .passive

    <!-- 阻止事件继续传播 -->
    <p v-on:mousemove.stop> Stop </p>
    
    <!-- 点击事件将只会触发一次 -->
    <button class=" btn btn-info"  v-on:click.once="add(1)"> + + </button>
    
     <!--点击 A 链接弹出提示内容,不再重载页面 -->
    <p><a v-on:click.prevent ="alert() "  href="http://blog.023xs.cn">blog.023xs.cn</a></p>

    注意事项:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

    Vue 按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    <!-- 用户输入内容时,按下Enter 键才会触发事件 -->
    <input v-on:keyup.enter="Email"   type="text" class="form-control"   placeholder="Email">
    
    <!-- 用户输入内容时,按下删除”或“退格”键 键才会触发事件 -->
    <input v-on:keyup.delete="Email"   type="text" class="form-control"   placeholder="Email">
    	

    全部的按键别名:

     

    .enter

    .tab

    .delete (捕获“删除”和“退格”键)

    .esc

    .space

    .up

    .down

    .left

    .right

    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名,当然也可以通过全局 config.keyCodes 对象自定义按键修饰符别名。

     

    更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

    展开全文
  • vue项目中使用elementui做一个竖屏走马灯效果,carousel组件有点击事件,并没有明确的鼠标滚轮事件,希望做一个鼠标前后滚动也可以切换走马灯,当没有滚动跳出现时,通过监听scroll将无作用。 1、走马灯的上下页...
  • 描述:在移动端中,我们的首页tab会缓存一些点击事件,比如在机构页面点开了下拉框==》在切换到赛事页面==》在切换回机构页面发现下拉款已经缓存了,是下拉的状态 1. 2. 3. 解决:每次滑动到别的页面的...
  • Vue 事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。v-on:click 单击事件 + + - - v-on:dblclick 双击事件 + + - - v-on:mousemove\mouseout 鼠标事件{{ x }} - {{ y }}new Vue({...
  • 1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播。效果如下:代码如下:计数器自增函数点击加一点击加二{{count}}...
  • 1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播。效果如下:代码如下:计数器自增函数点击加一点击加二{{count}}...
  • 1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播。 效果如下: 代码如下: <!DOCTYPE html><html><head...
  • Vue监听事件实现计数点击依次增加

    千次阅读 2018-05-12 17:32:19
    1.实现计数器功能,每点击一次按钮,count值增加一或增加二,鼠标在cordinates行移动时会更新当前坐标,通过自定义函数或者stop属性禁止事件传播。效果如下:代码如下:&lt;!DOCTYPE html&gt;&lt;...
  • Vue项目判断鼠标点击事件的左键、中键(滚轮)或右键 去掉特定区域的右键点击...在特定区域内添加监听鼠标点击事件的方法 在需要判断鼠标点击方式的区域标签中添加@mousedown属性,并在methods方法中定义相应的监听方
  • Vue 事件处理方法可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。v-on:click单击事件++--v-on:dblclick双击事件++--v-on:mousemove\mouseout鼠标事件{{x}}-{{y}}newVue({el:".vue-app",data:{...
  • 主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下
  • 在弹框pop外有鼠标点击事件时需要隐藏弹框pop,但是要除开按钮popBtn。 <div id="pop" v-if="isPop"> <!-- 其他html元素 --> </div> <button id="popBtn" @click="isPop=!isPop">显示或...
  • 部分在封装的组件中,使用点击事件时必须应用native点击才可以生效 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 JSX是一种JavaScript的语法扩展,你学会了吗? 定义和...
  • vue中,我们有时候需要对浏览器事件进行事件监听,比如当鼠标点击某一个按钮时,触发某种事件,这时,Vue为我们提供了方便快捷的方式v-on: v-on的基本使用 示例代码:定义两个按钮,点击对应的按钮,对数据进行...
  • 1.vue组件页面中监听路由变化 例如a.vue文件: watch:{ $route(to,from){ console.log(to.path);...2.vue组件页面中监听键盘事件(button标签去除在鼠标点击获取焦点后,按空格和enter键的点击...
  • 出了一个奇葩需求,需要在vue单页面项目用一个公共函数监听到所有页面上按钮的点击事件,这怎么搞?...监听鼠标点击事件?好像不行吧。有点伤脑壳。有没有大佬做过类似的功能的,给一点思路。谢谢谢谢
  • vue学习记录-05 事件监听 ...v-on用于绑定事件监听器,最常见的就是click点击事件,其他也有鼠标移入移出、键盘按下松开等。一般也可以写为“@”便于使用。 下面是一个简单的步进器小案例。 <di
  • vue获取鼠标位置

    千次阅读 2019-01-15 09:57:19
    touchstart 鼠标点击时,触发该事件一次。 touchmove 当鼠标移动时,会多次调用该事件。 touchend 当鼠标停止移动时,触发该事件一次。 click 点击   可以用下面的方式获取 event.offsetX/event.offsetY 取...
  • 目录: 初探vue Vue基础语法 - 渲染类型 Vue基础语法 - 属性绑定 Vue基础语法-双向绑定 什么是事件事件是JS的基础知识,说学VUE,对js的基础知识得有些了解!...js事件指的是可以被Javascript侦测...Vue监听事件 在v
  • 前言 vue同时监听表单里面的A和B A修改时,计算B的值,然后修改B B修改时,计算A的值,然后修改A 场景 我现在监听form表单里面的growth和rate。...鼠标点击哪个,就把当前参数的名称当做变量保.

空空如也

空空如也

1 2 3 4
收藏数 67
精华内容 26
关键字:

vue监听鼠标点击事件

vue 订阅