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进 ...
随机推荐
- Class文件结构-常量池
常量池里存放:1.字面量(Literal) • 文本字符串 • 声明为final的常量值(final的8种基本类型) • 非final的基本类型也可能进(doublefloatlong)2.符号引用( ...
- iOS开发中全量日志的获取
我们在app中对崩溃.卡顿.内存问题进行监控.一旦监控到问题,我们就需要记录下来,但是,很多问题的定位仅靠问题发生的那一刹那记录的信息是不够的,我们需要记录app的全量日志来获取更多的信息. 一,使用 ...
- 初级模拟电路：3-11 BJT实现电流源
回到目录 1. 恒流源 (1)简易恒流源 用BJT晶体管可以构造一个简易的恒流源,实现电路如下: 图3-11.01 前面我们在射极放大电路的分压偏置时讲过,分压偏置具有非常好的稳定性,几乎不受晶体管的 ...
- maven 上传jar包到私服仓库
按一下形式上传jiar包 # mvn deploy:deploy-file -DgroupId=com.itextpdf -DartifactId=itextpdf -Dversion=5.5.13 ...
- NFS挂载遇到的问题
问题描述:生产环境中需要经常运用NFS挂载,就在测试环境中测试一下,将服务器中192.168.1.4 /u01/app/oracle/product/11.2.0/dbhome_1/dbs 挂载到1 ...
- 工具推荐--刷LeetCode的神器
本文首发于微信公众号:[坂本先生],文章地址为: https://mp.weixin.qq.com/s/vHv5hO8nils_g2VSKwu1Cg如有转载请标明出处 今天给大家安利一款快速刷Leet ...
- getOutputStream() has already been called for this response 从了解到解决
一.背景说明 在tomcat的localhost.log日志中时长见到 getOutputStream() has already been called for this respon ...
- jQuery-文件上传问题解决
后端要求文件上传需传参数为二进制流,用form-data方式传递,如下图所示: 为了满足该输入参数要求,上传代码如下: <input type="file" id=" ...
- H5移动端开发遇见的东西
常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...
- 关于如何将sublime配置C++环境的总结
首先我得说,嗯,为了这个玩意为翻烂了99%的百度能搜到的文章.研究了关于Win7 32位,64位,Win10版本的配置,Win10的已经写好了一篇文章,可是Win7党(我是都用的,在家用Win10,学 ...