鼠标事件（e=e||window.event）

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

知识点1：确定鼠标按钮（event.button）

实例

<html>

<head>

<script type="text/javascript">

function whichButton(event)

{

var btnNum = event.button;

if (btnNum==)

  {

  alert("您点击了鼠标右键！")

  }

else if(btnNum==)

  {

  alert("您点击了鼠标左键！")

  }

else if(btnNum==)

  {

  alert("您点击了鼠标中键！");

  }

else

  {

  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");

  }

}

</script>

</head>

<body onmousedown="whichButton(event)">

<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>

</body>

</html>

知识点2：鼠标相对屏幕的距离（x=event.screenX  /  y=event.screenY ) 

实例

<html>

<head>

<script type="text/javascript">

function coordinates(event)

{

x=event.screenX

y=event.screenY

alert("X=" + x + " Y=" + y)

}

</script>

</head>

<body onmousedown="coordinates(event)">

<p>

在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。

</p>

</body>

</html>

知识点3：鼠标相对于浏览器窗口的坐标（ x=event.clientX / y=event.clientY ）

<html>

<head>

<script type="text/javascript">

function show_coords(event)

{

x=event.clientX

y=event.clientY

alert("X 坐标: " + x + ", Y 坐标: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>

</html>

知识点4：获取键盘的按键的 unicode（event.keyCode）

<html>

<head>

<script type="text/javascript">

function whichButton(event)

{

alert(event.keyCode)

}

</script>

</head>

<body onkeyup="whichButton(event)">

<p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>

<p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>

</body>

</html>

鼠标事件event和坐标的更多相关文章

  1. qt鼠标事件总结（坐标，跟踪，点击判断）

    1.QMouseEvent中的坐标QMouseEvent中保存了两个坐标,一个是全局坐标,当然另外一个是局部坐标.全局坐标(globalPos())即是桌面屏幕坐标(screen coordinate ...

  2. 第53天：鼠标事件、event事件对象

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  3. Opencv处理鼠标事件-OpenCV步步精深

    在图片上双击过的位置绘制一个 圆圈 鼠标事件就是和鼠标有关的,比如左键按下,左键松开,右键按下,右键松开,双击右键等等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标.我们通过以下函数来调用查看所 ...

  4. JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans

    <html> <head> <meta http-equiv="content-type" content="text/html" ...

  5. setTimeout里无法调用鼠标事件的event

    问题的由来是下面这段代码: middleOnmouseLeave: function (event) { setTimeout(function () { event.currentTarget.st ...

  6. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  7. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  8. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  9. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

随机推荐

  1. Elastic Stack之kibana使用

    Elastic Stack之kibana使用 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客数据流走向:FileBeat ===>Redis  ===>log ...

  2. mybtis 基础

    一.什么是mybatis MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBati ...

  3. MyBatis-获取 SqlSession

    Main 方法,mybatis 版本为 3.5.0 返回一个 DefaultSQlSession 对象,包含 Executor 和 Configuration InputStream inputStr ...

  4. vue报错：/node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?

    vue项目中报这样的错误:./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js? 大部分是因为文件的路径有 ...

  5. ELASTICSEARCH 搜索的评分机制

    从我们在elasticsearch复合框输入搜索语句到结果显示,展现给我们的是一个按score得分从高到底排好序的结果集.下面就来学习下elasticsearch怎样计算得分. Lucene(或 El ...

  6. 2018年度 35 个最好用 Vue 开源库

    在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目.无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠 ...

  7. 在window上使用 linux shell 删除文件夹递归地

    目的 在windows环境下, 整理代码,代码中含有 .svn 文件夹, 此文件夹在所有受控目录下都存在, 需要统一删除. 但是对windows的shell不熟悉,想用linux rm来删除, 如何实 ...

  8. luogu 1314 聪明的质检员

    二分答案的边界问题还是要注意 double挨着,int+1-1, 此题用到long long,所以初始化ans要足够大,前缀和优化 依然根据check答案大小左右mid,虽然有s,但是有了+1-1加持 ...

  9. 【D3D】Directx12运行报错&win10无法添加【图形工具】

    “我欢欣雀跃地打开<3D programming with Directx12>,准备接受D3D的洗礼,然后就卡在了 chapter 0 .”——Liez 100%纯小白的chapter ...

  10. 深度优先遍历（DFS）（转）

    优先搜索(DFS, Depth First Search)是一个针对图和树的遍历算法.早在19世纪就被用于解决迷宫问题. 对于下面的树而言,DFS方法首先从根节点1开始,其搜索节点顺序是1,2,3,4 ...