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进 ...
随机推荐
- 「SAP技术」A项目关联公司间退货STO流程
[SAP技术]A项目关联公司间退货STO流程 1)创建公司间退货STO单据. 如下图示的公司间退货STO 4500000572, 2),VL10B, 创建交货单. 如下图交货单号:80044918, ...
- Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...
- 《软件安装》VMware Workstation 不注册 下载
问答环节 问:为什么要下载安装VMware Workstation 答:VMware Workstation 可以安装虚拟机,我们可以把我们安装的一些软件装在虚拟机上面,防止自己的电脑卡顿(软件装多了 ...
- Jmeter脚本录制攻略
基于Apache JMeter(5.2.1) 首先在TestPlan里添加一个HTTP代理服务武器: 设置端口,在目标控制器里选择线程组. 在Chrome浏览器里设置代理: 点击启动按钮后,在浏览器登 ...
- [译]Vulkan教程(14)图形管道基础之固定功能
[译]Vulkan教程(14)图形管道基础之固定功能 Fixed functions 固定功能 The older graphics APIs provided default state for m ...
- Docker和ASP.NET Core
Docker和ASP.NET Core Docker 正在逐渐成为容器行业的事实标准,受到 Windows 和 Linux 生态系统领域最重要供应商的支持. (Microsoft 是支持 Docker ...
- Java实现网络聊天中使用的socket API与Linux socket API之间的关系
尝试着用Java编写一个网络聊天程序,发现总不如网上写的好,所以就直接引用了网上大神的优秀代码.代码如下: package project1; import java.awt.*; import ja ...
- LeetCode 219: 存在重复元素 II Contains Duplicate II
题目: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j],并且 i 和 j 的差的绝对值最大为 k. Given an ...
- [JVM 相关] Java 新型垃圾回收器（Garbage First,G1)
回顾传统垃圾回收器 HotSpot 垃圾收集器实现 Serial Collector(串型收集器) 使用场景,大多数服务器是单核CPU. 适用收集场景:1. 新生代收集(Young Generatio ...
- PHP中发送qq邮件
<?php namespace app\home\logic; use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Except ...