vue2.0获取鼠标位置的方法
如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #canvas{ width: 500px; height: 500px; text-align: center; line-height: 500px; border: 1px solid #E5E5E5; margin: 0 auto; margin-top: 100px; } </style> </head> <body> <div id="app"> <div id='canvas' @mousemove='updateXY'> {{x}} {{y}} </div> </div> <script> new Vue({ el:'#app', data:{ x:0, y:0 }, methods:{ updateXY:function(event){ this.x=event.offsetX; this.y=event.offsetY } } }) </script> </body> </html>
以上这篇vue2.0获取鼠标位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&
-
vue2.0获取鼠标位置的方法
如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #canvas{ width: 500px; height:
-
js获取鼠标位置实例详解
本文实例讲述了js获取鼠标位置的方法.分享给大家供大家参考,具体如下: 用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等.当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,这里详细介绍了浏览器在处理这些属性时的差异和最终的解决方法. Javascript代码如下: <script type="text/javascript"> // 说明:获取鼠标位置 // 整
-
JS获取鼠标位置距浏览器窗口距离的方法示例
本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法.分享给大家供大家参考,具体如下: 先来看看运行效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test_div { width:400px; height: 400px;
-
基于JavaScript获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi
-
C#实现获取鼠标句柄的方法
本文实例讲述了C#实现获取鼠标句柄的方法,分享给大家供大家参考.具体实现方法如下: 一.调用user32.dll (1)引用 using System.Runtime.InteropServices; (2)调用方法 1.获取窗口标题 [DllImport( "user32.dll" )] public static extern int GetWindowText( IntPtr hWnd, StringBuilder lpString,int nMaxCount ); 注:hWnd
-
VUE2.0中Jsonp的使用方法
本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的
-
js使用onmousemove和onmouseout获取鼠标坐标的方法
本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!DOCTYPE html> <html> <head> <script> function myFunction(e) { x=e.clientX; y=e.clientY; coor="Coordinat
-
Vue2.0 实现单选互斥的方法
本文介绍了Vue2.0 实现单选互斥的方法,分享给大家,具体如下: 需要实现如上图的功能 1. 首次加载页面,根据data里的catgoryId高亮对应的选项 2. 点击某个选项,该选项高亮,其他去掉高亮 代码结构: <template> <dd @click="changeCategory(currCourseFirst.categoryId)" v-for="currCourseFirst in currCourse.currCourseFirst&qu
-
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
vue 2.0 从接口中获取数据 <template> <div id="admins"> <h1>I am a title.</h1> <a> written by {{ author }} </a> <div v-for="admin in users"> {{admin.name}}<br>{{admin.password}} </div> </d
-
JavaScript中获取鼠标位置相关属性总结
javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象. 我们通过监听document的mousemove,就可以实时获得鼠标位置. 但是!!event中和鼠标相关的属性太多了,很让人头大!如下: event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event
随机推荐
- jquery的幻灯片图片切换效果代码分享
- bootstrap-datetimepicker实现只显示到日期的方法
- VBS教程:VBScript 语句-ReDim 语句
- IOS UITableView和NavigationBar的常用设置详解
- iOS实现一个可以在屏幕中自由移动的按钮
- asp.net下GDI+的一些常用应用(水印,文字,圆角处理)技巧
- 批量账号的login测试功能实现
- JavaScript 拾碎[三] 使用className属性
- javascript实现继承的简单实例
- YII模块实现绑定二级域名的方法
- PHP中的静态变量及static静态变量使用详解
- C语言实现进制转换函数的实例详解
- C语言在屏幕上输出杨辉三角
- php性能分析之php-fpm慢执行日志slow log用法浅析
- 图片自动缩小的js代码,用以防止图片撑破页面
- 新入域的计算机枚举,显示加域人员的批处理
- python解析xml文件实例分享
- sql server的一个有趣的bit位运算分享
- 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
- 解决webpack -p压缩打包react报语法错误的方法