在Internet Explorer里event是全局变量,会被存储在window.event里. 在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove会获取鼠标移动事件。
document.onmousemove = mouseMove;
function mouseMove(ev)
{
ev = ev || window.event; // ev即为事件对象
}
(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值.在MSIE下ev是空的,所以ev将设置为window.event.function mouseMove(ev)
{
ev = ev || window.event; // ev即为事件对象
}
“||”运算符在編寫兼容多瀏覽器的javascript很好用,如下面的取得事件源對象的語句:
var target = ev.target || ev.srcElement; // ev为event事件对象
2、js取html自定义属性
在IE中,我们可以通过“事件源.自定义属性名”的方式取得html自定义属性的值,但在firefox等浏览器就不起作用。要兼容多浏览器的取自定义属性值的方法是使用getAttribute()函数取值。
'var attr = target.hint; //只在IE中起作用
var attr = target.getAttribute("hint"); //IE、Firefox中都起作用
var attr = target.getAttribute("hint"); //IE、Firefox中都起作用
3、获取当前鼠标的坐标
下面函数可以获取当前鼠标的坐标,在IE、Firefox中都起作用。
function GetMousePos(ev){ //ev是事件对象
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
else if(document.documentElement.scrollTop) {
return {
x:ev.clientX + document.documentElement.scrollLeft,
y:ev.clientY + document.documentElement.scrollTop };
}
else {
return {
x:ev.clientX + document.body.scrollLeft-document.body.clientLeft,
y:ev.clientY + document.body.scrollTop-document.body.clientTop };
}
}
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
else if(document.documentElement.scrollTop) {
return {
x:ev.clientX + document.documentElement.scrollLeft,
y:ev.clientY + document.documentElement.scrollTop };
}
else {
return {
x:ev.clientX + document.body.scrollLeft-document.body.clientLeft,
y:ev.clientY + document.body.scrollTop-document.body.clientTop };
}
}
在MSIE与Firefox为首的其他浏览器下.Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置.如果你有一个500*500的窗口,而且你的鼠标在正中间,那么paegX和pageY将是250,当你将页面往下滚动500px,那么pageY将是750.此时pageX不变,还是250.
MSIE和这个相反,MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置,并不是文档.当我们有一个500*500的窗口,鼠标在正中间,那么clientX与clientY也是250,如果你垂直滚动窗口到任何位置,clientY仍然是250,因为相对ie窗口并没有变化.想得到正确的结果,我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性.最后,由于MSIE并没有0,0的文档起始位置,因为通常会设置2px的边框在周围,边框的宽度包含在document.body.clientLeft与clientTop这两个属性中,我们再加入这些到鼠标的位置中.