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进 ...
随机推荐
- Navicat远程连接MySQL8，必知防坑策略
项目上线是每一个开发工程师面临收获前面抓紧时间开发的成果,但有时我们上线项目首先需要做一些相关的业务测试.通过Xshell远程连接后使用命令行的方式连接操作Mysql这个没什么太大的你问题.但每次通过 ...
- JS查找某个字符在字符串中出现的位置及次数
var str = 'fdhfgcsaedvcfhgfh'; var index = str.indexOf('f'); // 字符出现的位置 var num = 0; // 这个字符出现的次数 wh ...
- 构建Electron的常见问题（Mac）
背景 起因是产品的需求,需要更换Electron为底层平台,但因为会有不少定制化的功能要实现,必须自己实现此类内容,所以也就导致必须自己编译Electron的源代码. 整个构建过程,看Electron ...
- vue render函数解析
一.render 函数的作用: 写一些vue.js的template太繁琐,利用render,可以使用js来生成模板,更加灵活和简便. 二.使用render前提: 官网也说了.在深入渲染函数之前推荐阅 ...
- Visual Studio安装工具和安装组件下载速度慢的问题
下载安装Visual Studio时在下面这个界面下载时速度只有几十KB每秒 解决办法:修改Host文件,在Host文件中添加下面代码,然后保存即可 110.53.72.104 download.vi ...
- 软工第八次实验——Git
hiahiahia我又来作恶了,莫名其妙的第八次实验还要更新! 文章目录 一.Git 1.1 概述 1.1.1 Git 1.1.2 分布式版本控制系统 1.1.3 指令集 1.2 版本控制系统 1.2 ...
- PHP三元运算符的写法
(expr1) ? (expr2) : (expr3); //php三元运算符的写法 $status = 3; $info2 = $status == 1 ? '待处理' : '已处理'; echo ...
- CSS3 更改字体被选中样式
CSS3 更改字体被选中样式
- docker工具之基本命令
docker工具之基本命令 1.docker服务的启动.停止.重启 systemctl start docker #启动docker服务 systemctl daemon-reload #守护进程重启 ...
- FTP安装及配置
在centos7安装ftp服务 yum install -y vsftpd 启动服务 systemctl start vsftpd 自启动 systemctl enable vsftpd 查看端口 注 ...