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

JavaScript025

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

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

这个可以利用 JS 的事件传递的特性,在body捕获到页面的所有的鼠标进入事件,并获取到触发事件的最底层的元素。这样你就知道鼠标当前处在那个元素中了。

例:

<div style="width:500pxheight:500pxbackground:red" id="redDiv">

<div style="width:400pxheight:400pxbackground:yellow" id="yellowDiv">

<div style="width:300pxheight:300pxbackground:blue" id="blueDiv">

</div>

</div>

</div>

<input type="text" id="msg" value=""/><!-- 显示结果的文本框 -->

<script>

var body = document.body//找到页面body用于绑定,其实也可以绑定document

function addHandler(element,type,handler){//给页面元素添加事件的通用方法,不理解的可以死记硬背下。写法是固定的。

if(element.addEventListener){// !IE//非IE下用addEventListener给元素添加事件

element.addEventListener(type,handler,false)

} else if(element.attachEvent){// IE//IE下要用 attachEvent给元素添加事件

element.attachEvent('on'+type,handler)

} else {//DOM0级//都不支持的时候 就用这种方法 给元素添加事件

element['on'+type] = handler

}

}

var msg = document.getElementById('msg')//为了看着方便,定义了一个文本框,用于显示鼠标当前所在位置的id

addHandler(body,'mouseover',function(event){

var event = event||window.event

var target = event.target||event.srcElement//找到真正触发事件的元素,

msg.value = target.id//这里取了触发元素的id,并传递给 文本框 方便查看。//文本框的id也是能被捕获到的。

})

</script>

js 鼠标事件详细

常用的几个类型

onClick

HTML: 2 | 3 | 3.2 | 4

Browser: IE3 | N2 | O3鼠标点击事件,多用在某个对象控制的范围内的鼠标点击

onDblClick

HTML: 2 | 3 | 3.2 | 4

Browser: IE4 | N4 | O鼠标双击事件

onMouseDown

HTML: 2 | 3 | 3.2 | 4

Browser: IE4 | N4 | O鼠标上的按钮被按下了

onMouseUp

HTML: 2 | 3 | 3.2 | 4

Browser: IE4 | N4 | O鼠标按下后,松开时激发的事件

onMouseOver

HTML: 2 | 3 | 3.2 | 4

Browser: IE3 | N2 | O3当鼠标移动到某对象范围的上方时触发的事件

onMouseMove

HTML: 2 | 3 | 3.2 | 4

Browser: IE4 | N4 | O鼠标移动时触发的事件

onMouseOut

HTML: 2 | 3 | 3.2 | 4

Browser: IE4 | N3 | O3当鼠标离开某对象范围时触发的事件

若想检测鼠标左键、右键点击事件可以用

事件button 值来检测

例如

document.onMouseDown =function(ev){

var oEvent = ev||event

alert(oEvent.button)

}

此时button= 0、1、2分别对应于 鼠标左中右