02 js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

IE 
左键是 window.event.button = 1 
右键是 window.event.button = 2 
中键是 window.event.button = 4 
没有按键动作window.event.button = 0

Firefox 
左键是 event.button = 0 
右键是 event.button = 2 
中键是 event.button = 1 
没有按键动作 event.button = 0

Opera 7.23/7.54 
鼠标左键是 window.event.button = 1 
没有按键动作 window.event.button = 1 
右键和中键无法获取

Opera 7.60/8.0 
鼠标左键是 window.event.button = 0 
没有按键动作 window.event.button = 0 
右键和中键无法获取

另外:屏蔽右键的是window.event.button = 3

************************************************************

Window.event对象代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 
Window.event对象只在事件发生的过程中才有效。 
Window.event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 
如果事件触发后,鼠标移出窗口外,则返回的值为 -1 ,这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

Event对象的属性有: 
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

下面简单的描述一下它的这些属性: 
1.altKey 
描述: 检查alt键的状态。 
语法: event.altKey 
可能的值: 当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

2.button 
描述: 检查按下的鼠标键。 
语法: event.button 
可能的值: 
0 没按键 ;1 按左键 ;2 按右键 ;3 按左右键 ;4 按中间键 ;5 按左键和中间键 ;6 按右键和中间键 ;7 按所有的键 
这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

3.cancelBubble 
描述: 检测是否接受上层元素的事件的控制。 
语法: event.cancelBubble[ = cancelBubble] 
可能的值: 这是一个可读写的布尔值 
TRUE 不被上层原素的事件控制。 
FALSE 允许被上层元素的事件控制。这是默认值。

4.clientX 
描述: 返回鼠标在窗口客户区域中的X坐标。 
语法: event.clientX 
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

5.clientY 
描述: 返回鼠标在窗口客户区域中的Y坐标。 
语法: event.clientY 
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

6.ctrlKey 
描述: 检查ctrl键的状态。 
语法: event.ctrlKey 
可能的值: 当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。

7.fromElement 
描述: 检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考18.toElement 
语法: event.fromElement 
注释: 这是个只读属性。

8.keyCode 
描述:检测键盘事件相对应的内码。 这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。 
语法: event.keyCode[ = keyCode] 
可能的值: 这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

9.offsetX 
描述: 检查相对于触发事件的对象,鼠标位置的水平坐标 
语法: event.offsetX

10.offsetY 
描述: 检查相对于触发事件的对象,鼠标位置的垂直坐标 
语法: event.offsetY

11.propertyName 
描述: 设置或返回元素的变化了的属性的名称。 
语法: event.propertyName [ = sProperty ] 
可能的值: sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。 
注释:这个属性是可读写的。无默认值。你可以通过使用 onpropertychange 事件,得到 propertyName 的值。

12.returnValue 
描述: 设置或检查从事件中返回的值 
语法: event.returnValue[ = Boolean] 
可能的值: true 事件中的值被返回 
false 源对象上事件的默认操作被取消

13.screenX 
描述: 检测鼠标相对于用户屏幕的水平位置 
语法: event.screenX 
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

14.screenY 
描述: 检测鼠标相对于用户屏幕的垂直位置 
语法: event.screenY 
注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

15.shiftKey 
描述: 检查shift键的状态。 
语法: event.shiftKey 
可能的值: 当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。

16.srcElement 
描述: 返回触发事件的元素。只读。例子见本文开头。 
语法: event.srcElement

17.srcFilter 
描述: 返回触发 onfilterchange 事件的滤镜。只读。 
语法: event.srcFilter

18.toElement 
描述: 检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考7.fromElement 
语法: event.toElement 
注释: 这是个只读属性。

19.type 
描述: 返回事件名。 
语法: event.type 
注释: 返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click 只读。

20. x 
描述: 返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。 
语法: event.x 
注释: 如果事件触发后,鼠标移出窗口外,则返回的值为 -1 
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

21. y 
描述: 返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。 
语法: event.y

本文链接地址: http://www.jb51.net/article/33525.htm

时间: 2024-08-10 00:06:07

02 js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍的相关文章

jQuery用on()代理的方法实现鼠标点击事件,当前的背景色变化其他的背景色不变

<!DOCTYPE html> <html> <head> <title></title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .wrapper li{ list-style-type: none; wi

js鼠标点击特效,有关参数设置

效果图,用的faststone--录像--togif,黄色圆圈实际是不显示的 博客后台管理设置 本地新建一个demo.html文件,可以自行测试,要引入jquery文件哦 来个“红橙黄绿蓝靛紫”的点击特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquer

android基础之如何实现触屏监听和鼠标点击事件

直接上代码: android基础之如何实现触屏监听和鼠标点击事件

jQuery模拟鼠标点击事件失效的问题

最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click')的写法也是无济于事. 在网上一顿扒拉后,发现使用$('div#pager a.next')[0].click();就OK了. $('div#pager a.next')[0]这种写法其实就相当于把jQuery对象转换为Dom对象了. 模拟点击不生效的原因 如果使用jQuery的写法:$('a#t

vue.js click点击事件获取当前元素对象

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

鼠标点击事件

1 鼠标点击事件 2 onclick 元素上发生鼠标点击时触发. 3 ondblclick 元素上发生鼠标双击时触发. 4 ondrag 元素被拖动时运行的脚本. 5 ondragend 在拖动操作末端运行的脚本. 6 ondragenter 当元素元素已经被拖动到有效拖放区域时运行的脚本. 7 ondragleave 当元素离开有效拖放目标时运行的脚本. 8 ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本. 9 ondragstart 在拖动操作开端运行的脚本. 10 on

js模拟点击事件实现代码

js模拟点击事件实现代码 更新时间:2012年11月06日 17:33:33   作者:   我要评论 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的“提交”按钮来提交表单.上代码吧 html: 复制代码 代码如下: <h3>请单击“提交”,测试提交按钮的单击事件也被触发了.</h3> <button id="btn">提交</button> <form action="#&q

ListView使用自定义适配器的情况下实现适配器的控件点击事件执行Activity界面中的方法

如果ListView使用的是自定义的适配器,比如MyArrayAdapter extends ArrayAdapter<String> 那么,如何实现适配器中的点击事件执行activity界面中的方法呢? 实现思路:在自定义适配器MyArrayAdapter 类型中自定义接口和接口方法,然后在activity界面中MyArrayAdapter实例实现这个接口. 较为完整的代码见上文. 1.MyArrayAdapter 关键代码 自定义接口和方法的代码如下: //列表项的单击事件监听接口 pub

Listbox与dataGridView的获取鼠标点击事件的区别!!!

1 int index = lisxian.IndexFromPoint(e.X, e.Y);//获取鼠标点击 2 lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! 1 int index = e.RowIndex; 2 DataGridViewRow currenRow = this.dgvxian3.Rows[index]; dataGridView获取鼠标代码!!!! private void lisxian_SelectedIndexCh