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进 ...
随机推荐
- 速查 objc中可变集合和不可变集合的遍历性能
次数 : 5,000,000 NSMutableArray //0.131999/0.116085/0.112128 NSArray //0.116842/0.111675/0.108623 NSMu ...
- android sdk tools里找不到draw9patch.bat 如何制作.9.png 格式图片
1.什么是.9.png格式 .9.png格式的图片可以在安卓平台指定拉伸区域,防止图片失真,一般用作背景图. 2.前提 最近项目中要用到.9.png格式图片,想着这个简单使用draw9patch.ba ...
- Android五大布局详解——GridLayout（网格布局）
GridLayout 本章以一个小的实现示例讲述: 实现效果如图: 代码实现: <?xml version="1.0" encoding="utf-8"? ...
- Windows系统Git配置教程（Git配置git config）
Windows系统Git配置教程(Git配置git config) 在很多Git配置教程中,多是安装完毕后就告诉大家要配置用户名和邮箱,但是这个配置是保存在哪里呢,配置后面的参数有什么不同呢,下面 ...
- 产品经理如何使用 CODING 进行项目规划
CODING 为您的企业提供从概念到软件开发再到产品发布的全流程全周期软件研发管理,为您的研发团队提供全程助力,帮助研发团队捋清需求.不断迭代.快速反馈并能实时追踪项目进度直到完成.同时 CODING ...
- 1.1 菜单管理 ——MyRapid WinForm快速开发框架-功能介绍
菜单表数据库设计 可以根据数据表取得树状目录,其中 版本和作者 可以分别对版本和修改人进行追溯 有兴趣的朋友可以尝试再添加一个收藏夹 也是比较常用的功能 这里我没有做这个功能 然后看下菜单编辑 ...
- TCP 三次握手与四次挥手
TCP是什么 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议. TCP有6种标示: ...
- 用iText5-1-生成PDF
参考代码和图片出处 https://howtodoinjava.com/library/read-generate-pdf-java-itext/ pom引入jar包 <dependencies ...
- 201871010113-刘兴瑞《面向对象程序设计（java）》第十七周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- 【洛谷5369】[PKUSC2018] 最大前缀和（状压DP）
点此看题面 大致题意: 对于一个序列,求全排列下最大前缀和之和. 状压\(DP\) 考虑如果单纯按照题目中对于最大前缀和的定义,则一个序列它的最大前缀和是不唯一的. 为了方便统计,我们姑且规定,如果一 ...