Javascript’s Event 的一点总结

我在自己的这个 Blog 上用 Javascript 实现了一个自定义的右键弹出菜单。个人认为鼠标点击事件的获取和计算是比较难点的事情。一般以为考虑兼容性(如 IE 5/6FF),实际上还要考虑 HTML 文件在文件头的定义。而且,Event 事件和 Document 对象在 IE 和 NS 下又有各自不同的定义和用法。呼~经过对这个菜单的不断修改和上网搜索资料,在这里总结一下,希望对其他朋友有个帮助。

下面是“无定义 HTML 的 Event 事件”的测试代码,存为 Event1.html,分别用 IE 和 Firefox 打开,点击页面就可看到结果。

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>无定义 HTML 的 Event 事件</title>
<script language=”javascript”>
function getvalue(e){
if (!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
curX = e.pageX – window.pageXOffset;
curY = e.pageY – window.pageYOffset;
mouX = e.pageX;
mouY = e.pageY;
broX = window.pageXOffset;
broY = window.pageYOffset;
}else{
winW = document.body.clientWidth;
winH = document.body.clientHeight;
curX = event.clientX;
curY = event.clientY;
mouX = event.clientX + document.body.scrollLeft;
mouY = event.clientY + document.body.scrollTop;
broX = document.body.scrollLeft;
broY = document.body.scrollTop;
}
alert(” 窗口可见宽度(winW): “+winW+”\n\n 窗口可见高度(winH): “+winH+”\n\n 距窗口左边距离(curX): “+curX+”\n\n 距窗口顶部距离(curY): “+curY+”\n\n 距页面左边距离(mouX): “+mouX+”\n\n 距页面顶部距离(mouY): “+mouY+”\n\n 页面滚动的宽度(broX): “+broX+”\n\n 页面滚动的高度(broY): “+broY);
return true;
}
document.onclick=getvalue;
</script>
</head>

<body>
<img src=”” width=”400″ height=”500″>
</body>
</html>

下面是“定义了 HTML’s DOCTYPE 的 Event 事件”的测试代码,存为 Event2.html,分别用 IE 和 Firefox 打开,点击页面就可看到结果;很显然,document.body 变成了 document.documentElement

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>定义了 HTML’s DOCTYPE 的 Event 事件</title>
<script language=”JavaScript” type=”text/javascript”>
function getvalue(e){
if (!document.all){
winW = window.innerWidth;
winH = window.innerHeight;
curX = e.pageX – window.pageXOffset;
curY = e.pageY – window.pageYOffset;
mouX = e.pageX;
mouY = e.pageY;
broX = window.pageXOffset;
broY = window.pageYOffset;
}else{
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
curX = event.clientX;
curY = event.clientY;
mouX = event.clientX + document.documentElement.scrollLeft;
mouY = event.clientY + document.documentElement.scrollTop;
broX = document.documentElement.scrollLeft;
broY = document.documentElement.scrollTop;
}
alert(” 窗口可见宽度(winW): “+winW+”\n\n 窗口可见高度(winH): “+winH+”\n\n 距窗口左边距离(curX): “+curX+”\n\n 距窗口顶部距离(curY): “+curY+”\n\n 距页面左边距离(mouX): “+mouX+”\n\n 距页面顶部距离(mouY): “+mouY+”\n\n 页面滚动的宽度(broX): “+broX+”\n\n 页面滚动的高度(broY): “+broY);
return true;
}
document.onclick=getvalue;
</script>
</head>

<body>
<img src=”” width=”400″ height=”500″ alt=”” />
</body>
</html>

呵呵,如果还有看不明白的朋友,欢迎与我联系,交流一下。

15 thoughts on “Javascript’s Event 的一点总结

  1. 石头儿

    你好,我试了一下,为什么在IE里的页面滚动宽度和高度总是0呢,不管窗口变得多大多小,总是0。
    如果您有时间,能帮忙解释下scrollLeft和ScrollTop及pixelLeft等吗,好难理解,我又没在其他网站上搜索到有用的信息,或是没有看明白,谢谢了发我邮箱就可以,再谢!

  2. Link

    document.all ? event.srcElement : e.target;
    这样写没问题滴。我的右键就是这样写的:)

  3. FULLYU

    請問如果不用 document.onclick 取得ip
    而是從一個連接上 onclick=”function name” 可否取得 座標!
    ie 的沒有問題,但 firefox 中, e 就沒法取得!
    請各高手指教!謝謝

  4. 小全

    无论是否进行了文件头的声明,document.body和document.documentElement都存在的,如果要判断是否采用了xhtml的格式,就必须决断两者下的一个相同对象的取值。例如我是决断document.body.clientWidth和document.documentElement.clientWidth

  5. Link

    不要拿文件头说事,直接判断其中之一如 document.documentElement 是否为空或不存在,是就用另一个就是了。

  6. CXH

    [Re #7, Afly]

    请问如何才能做出在这二种文件头下都可以使用?或者说如何判断当前使用的文件头?

  7. mytata

    hehe,非常感谢,你的详解帮我解决的菜单显示位置的问题。

  8. Link

    没有好坏之分。真要说的,现在一般都定义 XHTML,当然是 document.documentElement 好用点。

  9. wnjo

    不好意思,資質魯鈍,還是不太了解…
    麻煩詳細解說…
    使用document.documentElement
    比使用document.body
    好在哪?

  10. Guest

    效果当然无区别。因为例一中的 document.body 变成了 例二中的 document.documentElement。还不明白么!?

  11. wnjo

    你的撥放器好cool呀!
    是如何做的呀?
    真厲害!

  12. wnjo

    我測試之後
    並無發覺兩者有何差別啊!

  13. Link

    哦,漏了两个:
    页面总高度:document.body.scrollHeight
    页面总宽度:document.body.scrollWidth

    经测试,IE/NS 均支持这两个参数。