Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title id="title">{{title}}</title>
</head>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<!--鼠标左键-->
<div :style="left_style" @click.left="mouseclick('左')"></div>
<!--鼠标中键-->
<div :style="middle_style" @click.middle="mouseclick('中')"></div>
<!--鼠标右键-->
<!--加prevent为了屏蔽浏览器自带右键-->
<div :style="right_style" @contextmenu.prevent="mouseclick('右')"></div> </div>
<script>
var vue = function (options){new Vue(options)};
vue({
el:'#title',
data:{
title:'Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle'
}
});
var app = vue({
el:'#ask',
data:{
left_style:{border:'solid 2px red',height:'200px'},
right_style:{border:'solid 2px blue',height:'200px'},
middle_style:{border:'solid 2px yellow',height:'200px'},
},
methods:{
mouseclick(where){
alert('点击鼠标'+where+'键触发');
}, }
}); </script>
</body>
</html>
Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle的更多相关文章
- 【转】 js怎么区分出点击的是鼠标左键还是右键？
IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events. ...
- JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】
IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events.b ...
- ctrl+鼠标左键监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Windows】如何判断当前鼠标是否按下左键或右键
在delphi中,很多窗体和控件的鼠标事件里面已经将鼠标按键状态封装好传给响应事件的函数,所以这种情况直接使用就可以,但在某些时候,我们没有这些事件可以处理时,想判断鼠标按键是否按下的状态,就需要借助 ...
- js 鼠标左键拖动滚动
鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法
转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: ze ...
- win10 uwp 获取按钮鼠标左键按下
我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...
- sublime text3配置ctrl+鼠标左键进行函数跳转【转】
本文转载自:https://blog.csdn.net/shangdibaozi/article/details/77503426 点击Preferences->Browse Packages进 ...
随机推荐
- python的学习大纲
python基础部分 函数 初识函数 函数进阶 装饰器函数 迭代器和生成器 内置函数和匿名函数 递归函数 常用模块 常用模块 模块和包 面向对象 初识面向对象 面向对象进阶 网络编程 网络编程 并发编 ...
- English:Day-to-day 1015
device session stroll pants & trousers gist deep depth diameter D radius R merge ..
- Android app targetSdk升级到27碰到的一个bug补充说明
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/203 完美解决google nexus设备全面屏主题cra ...
- OGG For Oracle To PostgreSQL
本文档描述OGG(Oracle goldengate)为Oracle同步到PostgreSQL数据库配置.在目前去“IOE”潮流.PostgreSQL确实是Oracle最好的替代品之一. 实验环境如下 ...
- SpringBoot 日志系统
日志框架 开发一个大型系统的简易步骤: system.out.println("..") 将关键的数据在控制台输出 框架记录系统的一些运行时的信息,---日志框架. 牛逼的功能-- ...
- Linux系统iptables与firewalld防火墙
iptables iptables服务用于处理或过滤流量的策略条目(规则),多条规则可以组成一个规则链,而规则链则依据数据包处理位置的不同进行分类. 在进行路由选择前处理数据包(PREROUTING) ...
- Reinforcement Learning by Sutton 第三章习题答案
好不容易写完了 想看全部的欢迎点击下面的github https://github.com/LyWangPX/Solutions-of-Reinforcement-Learning-An-Introd ...
- 基于django的个人博客网站建立（五）
基于django的个人博客网站建立(五) 前言 网站效果可点击这里访问 之前鸽了两天,今天继续再写点 主要内容 今天加了个展示照片的功能,就叫他生活记录吧 先建表 class Record(model ...
- Node.js上传文件出现Unexpected field
上传文件时,input框的name值要与node接口中single(' ')中的参数一致,否则会报"意外字段的错" 前端用的layui 后端node接口
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性2
5 height和width属性 height和width属性规定用于image类型和input标签的图像高度和宽度.图像通常会同时指定高度和宽度属性.如果图像设置高度和宽度,图像所需的空间在加载页 ...