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进 ...
随机推荐
- Java+TestNG+Maven+Excel+IDEA接口自动化入门（一）环境配置
前置: 1.本机环境安装了maven并配置环境变量 2.本机环境安装了IDEA软件 3.本机环境安装了Java jdk 8版本 4.有一定java和maven基础 因为以上网上例子很多,就不再重复赘述 ...
- Os-HackNos-Report
实验主机:Os-hackerNos靶机一台/Kali linux攻击机一台 实验网络:桥接网络 实验目标:获取靶机的Root权限 难易程度:简单 前期工作: 1:下载Virtualbox虚拟化软件(也 ...
- go 语言学习图解
- Java基础（七）
左连接,右连接,内连接,全连接的区别 左连接:返回左表所有行,右表没有匹配行则返回null 右连接:返回右表所有行,左表没有匹配行则返回null 内连接:返回左右表共有行 全连接:返回左右表所有行,无 ...
- 探究JS V8引擎下的“数组”底层实现
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/np9Yoo02pEv9n_LCusZn3Q作者:李超 JavaScript 中的数组有很多特性 ...
- 使用matplotlib.pyplot中scatter()绘制散点图
1.二维散点图 二维散点图的函数原型: matplotlib.pyplot.scatter(x, y, s=None, c=None, marker=None, cmap=None, norm=Non ...
- SPARQL入门（二）使用Java操作ARQ
在文章SPARQL入门(一)SPARQL简介与简单使用中,我们了解了RDF.SPARQL以及基于Java编写的SPARQL处理器ARQ.在本文中,笔者将会如何使用Java来操作ARQ. 注意到 ...
- 如何获得大学教材的PDF版本？
最近急需一本算法书的配套答案,这本配套单独出售,好像在市面上还买不到,在淘宝上搜索也只是上一个版本,并没有最新版本,让我很无奈.加上平时肯定会有这么一种情况,想看一些书,但买回来也看不了几次,加上计算 ...
- PAT 1011 World Cup Betting 查找元素
With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...
- 使用vue-cli创建工程的时候提示vue-cli Failed to download repo vuejs-templates/webpack-simple:self signed certificate in certificate chain的解决方法
最近在使用 vue-cli 脚手架创建项目的时候,遇到 webpack-simple 模板下载不成功的情况,提示 vue-cli Failed to download repo vuejs-templ ...