1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="vue.js"></script>
  6.     <title id="title">{{title}}</title>
  7. </head>
  8. <body>
  9. <div id="ask"><!--vue不能控制body和html的标签-->
  10.     <!--鼠标左键-->
  11.     <div :style="left_style" @click.left="mouseclick('左')"></div>
  12.     <!--鼠标中键-->
  13.     <div :style="middle_style" @click.middle="mouseclick('中')"></div>
  14.     <!--鼠标右键-->
  15.     <!--加prevent为了屏蔽浏览器自带右键-->
  16.     <div :style="right_style" @contextmenu.prevent="mouseclick('右')"></div>
  17.  
  18. </div>
  19. <script>
  20.     var vue = function (options){new Vue(options)};
  21.     vue({
  22.         el:'#title',
  23.         data:{
  24.             title:'Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle'
  25.         }
  26.     });
  27.     var app = vue({
  28.         el:'#ask',
  29.         data:{
  30.             left_style:{border:'solid 2px red',height:'200px'},
  31.             right_style:{border:'solid 2px blue',height:'200px'},
  32.             middle_style:{border:'solid 2px yellow',height:'200px'},
  33.         },
  34.         methods:{
  35.             mouseclick(where){
  36.                 alert('点击鼠标'+where+'键触发');
  37.             },
  38.  
  39.         }
  40.     });
  41.  
  42. </script>
  43. </body>
  44. </html>

Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle的更多相关文章

  1. 【转】 js怎么区分出点击的是鼠标左键还是右键？

    IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0  默认.没有按任何按钮. events. ...

  2. JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】

    IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events.b ...

  3. ctrl+鼠标左键监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【Windows】如何判断当前鼠标是否按下左键或右键

    在delphi中,很多窗体和控件的鼠标事件里面已经将鼠标按键状态封装好传给响应事件的函数,所以这种情况直接使用就可以,但在某些时候,我们没有这些事件可以处理时,想判断鼠标按键是否按下的状态,就需要借助 ...

  5. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  6. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  7. zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法

    转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: ze ...

  8. win10 uwp 获取按钮鼠标左键按下

    我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...

  9. sublime text3配置ctrl+鼠标左键进行函数跳转【转】

    本文转载自:https://blog.csdn.net/shangdibaozi/article/details/77503426 点击Preferences->Browse Packages进 ...

随机推荐

  1. MySQL 重置Mysql root用户账号密码

    重置Mysql root用户账号密码 By:授客 QQ:1033553122   问题描述: 使用mysqladmin.exe执行命令时出现以下错误提示: mysqladmin: connect to ...

  2. JS基础语法---Array对象的方法

    Array对象的方法   Array.isArray(对象)---->判断这个对象是不是数组 instanceof关键字 判断对象是不是数组类型:两种方法: //1 instanceof var ...

  3. iOS开发中全量日志的获取

    我们在app中对崩溃.卡顿.内存问题进行监控.一旦监控到问题,我们就需要记录下来,但是,很多问题的定位仅靠问题发生的那一刹那记录的信息是不够的,我们需要记录app的全量日志来获取更多的信息. 一,使用 ...

  4. dedecmsV5.7 插入记录并返回刚插入数据的自增ID

    //插入一条数据 $sql = "INSERT INTO `table_name` (`name`,age) VALUES ('小明','23')"; $dsql->SetQ ...

  5. MySQL优化/面试，看这一篇就够了

    原文链接:http://www.zhenganwen.top/articles/2018/12/25/1565048860202.html 作者:Anwen~链接:https://www.nowcod ...

  6. [PHP] socket客户端时的超时问题

    连接socket分为连接超时和读取超时 $sock=stream_socket_client("www.google.com:80", $errno,$errstr,2);    ...

  7. Violet 6 杯省选模拟赛 蒲公英

    https://www.luogu.com.cn/problem/P4168 题目 给$n$个数字,有$m$次询问,问$a_l, a_{l+1} , \dots , a_r$的众数是什么, $1\le ...

  8. BitMap原理

    BitMap原理  

  9. redis缓存穿透，缓存击穿，缓存雪崩

    概念解释 redis 缓存穿透 key对应的数据在数据源并不存在,每次针对此key的请求从缓存获取不到,请求都会到数据源,从而可能压垮数据源.比如用一个不存在的用户id获取用户信息,不论缓存还是数据库 ...

  10. Web安全测试学习笔记 - DVWA+PHP环境搭建

    DVWA(Damn Vulnerable Web Application),是一个用PHP编写的,作为Web安全测试练习平台的合法环境(毕竟咱不能为了练习就随便找个网站去攻击...),也就是俗称的靶场 ...