Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

时间：2022-08-14 13:15:00
<!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的更多相关文章

  1. 【转】 js怎么区分出点击的是鼠标左键还是右键？

    IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0  默认.没有按任何按钮. events. ...

  2. JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】

    IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events.b ...

  3. ctrl&plus;鼠标左键监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【Windows】如何判断当前鼠标是否按下左键或右键

    在delphi中,很多窗体和控件的鼠标事件里面已经将鼠标按键状态封装好传给响应事件的函数,所以这种情况直接使用就可以,但在某些时候,我们没有这些事件可以处理时,想判断鼠标按键是否按下的状态,就需要借助 ...

  5. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  6. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  7. zend studio中ctrl&plus;鼠标左键无法转到类或函数定义文件的解决方法

    转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: ze ...

  8. win10 uwp 获取按钮鼠标左键按下

    我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? 其实UWP已经没有MouseLeftButtonDown,于是我们可以使用一个简单方法去获取鼠标左键按下. 我们在xa ...

  9. sublime text3配置ctrl&plus;鼠标左键进行函数跳转【转】

    本文转载自:https://blog.csdn.net/shangdibaozi/article/details/77503426 点击Preferences->Browse Packages进 ...

随机推荐

  1. PureBasic 集成Form设计器的使用

    The PureBasic IDE has a very powerful integrated form designer, which allows to design easily window ...

  2. 直线相交 POJ 1269

    // 直线相交 POJ 1269 // #include <bits/stdc++.h> #include <iostream> #include <cstdio> ...

  3. Android：DES加密

    private static final String KEY = "xxxxxx"; // KEY的字节长度必须超过24 public DESUtil(){ super(); } ...

  4. python爬虫从入门到放弃（八）之 Selenium库的使用

    一.什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium Remote Control)和测试的并行 ...

  5. Spring Cloud微服务笔记（二）Spring Cloud 简介

    Spring Cloud 简介 Spring Cloud的设计理念是Integrate Everything,即充分利用现有的开源组件, 在它们之上设计一套统一的规范/接口使它们能够接入Spring ...

  6. Oracle分析函数及常用函数： over&lpar;&rpar;&comma;rank&lpar;&rpar;over&lpar;&rpar;作用及用法--分区&lpar;分组&rpar;求和&amp&semi; 不连续&sol;连续排名

    (1)   函数:  over()的作用及用法:    -- 分区(分组)求和. sum() over( partition by column1 order by column2 )主要用来对某个字 ...

  7. cf842D 01字典树&vert;线段树 模板见hdu4825

    一般异或问题都可以转换成字典树的问题,,我一开始的想法有点小问题,改一下就好了 下面的代码是逆向建树的,数据量大就不行 /*3 01字典树 根据异或性质,a1!=a2 ==> a1^x1^..^ ...

  8. Java charAt&lpar;&rpar; 方法

    charAt() 方法用于返回指定索引处的字符.索引范围为从 0 到 length() - 1. 参数 index -- 字符的索引. 返回值 返回指定索引处的字符. 实例 public class ...

  9. Using Elixir Dynamic Supervisors

    转自: https://blog.smartlogic.io/elixir-dynamic-supervisors/ I have been working on my side project Gr ...

  10. 关于Modelsim SE软件Fatal License Error的解决方法

    操作环境:Win7 32位系统 软件版本:Modelsim SE 10.1a Modelsim SE软件有时会弹出如图1所示“Fatal License Error”的提示信息,原因可能是软件破解不彻 ...

相关文章