首页 »Javascript教程 » javascript拖拽:Javascript拖拽& 拖放系列文章3的细说事件对象 »正文javascript拖拽:Javascript拖拽& 拖放系列文章3的细说事件对象来源: 发布时间:星期四, 2008年12月25日 浏览:76次 评论:0
在阅读本文前
 可以先阅读 Javascript拖拽&拖放系列文章2的off Left、offTop、offWidth、offHeight属性 这篇文章以理清上下文关系 好了 让我们开始进入正题 模型相同  属性/思路方法 1 Button属性 Integer类型 可读可写对于特定鼠标事件表示按下鼠标按钮它可以在拖拽时候判断是否是鼠标左键引发mousedown事件它所有取值及其意义(参考自Javascript高级 设计)好了让我们开始进入正题 3.1 e/window.Event对象 属性/思路方法 3.1.1 IE事件模型和DOM事件如下: 0-未按下按钮 1-按下左键 2-按下右键 3-同时按下左右按钮 4-按下中键 5-按下左键和中键 6-按下右键和中键 7同时按下左中右键 mouseup button属性返回数值和mousedown事件中完全 样 注:在兼容DOM事件模型 所有浏览器中0表示按下左键数值1并不存在2表示按下右键对于非鼠标事件返回“un d” 2 clientX、clientY属性 这两个属性 类型都是Integer单位是像素可读可写分别表示相关事件发生时鼠标在浏览器客户端区域(不包括工具栏、滚动条等)x坐标和y坐标用张图片来解释就再好不过了请看:  图3.1:clientX和clientY属性 以下代码是 个非常简单举例它可以随时定位鼠标坐标并将结果显示在两个文本框中如果愿意话你可以尝试运行它兼容目前所有现代浏览器举例代码1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char =UTF-8" /><title>Untitled Document</title> <style type="text/css"> body{ border:1px solid black; margin:0px; } </style> <script type="text/javascript" language="JavaScript"> document.onmousemove=move; function move(e){  (!e){ e=window.event; } var xElement=document.getElementById("x"); var yElement=document.getElementById("y"); xElement.value=e.clientX; yElement.value=e.clientY; } </script> </head> <body> <input type="text" id="x" value="" /> <input type="text" id="y" value="" /> </body> </html> 3 type属性 0
相关文章
读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
