理解JavaScript中的事件 Event(2)
作者:136com 来源:蓝色理想 发布时间:2008-03-19 11:16:00
标签:事件,Event,ie,DOM,javascript
二、 IE中拖动DOM元素的例子
/*
该函数由mousedown事件处理调用
它为随后发生的mousemove和mouseup事件注册了临时的捕捉事件处理程序
并用这些事件处理程序拖动指定的文档元素
第二个参数必须是mousedown事件的事件对象
*/
function beginDrag(elementToDrag,event)
{
//该元素当前位于何处
//该元素的样式性质必须具有left和top CSS属性
//此外,我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离,下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序
// 注意,它们被注册为文档的捕捉事件处理程序
// 在鼠标按钮保持按下的状态的时候,这些事件处理程序保持活动的状态
// 在按钮被释放的时候,它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我们已经处理了该事件,不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
这是在元素被拖动时候捕捉mousemove事件的处理程序,它响应移动的元素
*/
function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
/*
该事件将捕捉拖动结束的时候发生的mouseup事件
*/
function upHandler(e)
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
调用它的HTML文件代码:
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="dragIE.js"></script>
</head>
<body>
<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
<div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" >
拖动我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
0
投稿
猜你喜欢
- 一、概论超大型系统的特点为:1、处理的用户数一般都超过百万,有的还超过千万,数据库的数据量一般超过1TB;2、系统必须提供实时响应功能,系统
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- 在ASP中,为什么有时候刷新页面后,重新执行ASP代码时就连不上数据库了?这种情况一般发生在动态IP分配中,由于ASP连接数据库是定时的,默
- 家里没网络,实在无聊,玩游戏都没味道,只好玩CSS。这个东西实在没什么技术含量在里面,纯属打发时间。简单说明:一张图片放在底层,
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域(textarea)中添加了的背景图片,一般是使用网站的logo,我记得我最早注意
- 我们有时候看到一些文章因为一行的字符超长而把一些表格或DIV撑开或字符写到溢出了.如何防止表格防止撑开,表格不被内容撑开,单行字符超长div
- 记得上次电梯按钮讨论中有朋友提到日本的无序电梯,我没有太明白意思。除了各位大师提出的无厘头方案,也有不少超前的创意,好多都值得继续思考和探索
- 今天发现了一个显示ORACLE语法的好网站。内容太多,就不一一摘录了,记在这里,也方便自己查找。http://ss64.com/ora/ 目
- 如果你看过YUI的RAW源码,会发现很多跟javadoc语法类似的注释。据说(via)是使用JSDoc这个工具。但我探索了一遍,发现YUI多
- 最近 W3C 一口气推出 7 个 HTML 工作草案,涵盖了 HTML5,HTML RDF,HTML Microdata,HTM
- 代码如下:declare @cmd nvarchar(4000) set @cmd = N'exec [?].sys.sp_chan
- 淡入淡出图片轮换轮播效果,可以做新闻图片推荐需要的拿去用,效果预览请点击运行代码相关效果推荐:迅雷首页新闻图片轮播效果js源码 <!D
- “重构”的春风吹遍大江南北,互联网一时间风声鹤唳,“div+CSS”俨然已成为一种“时尚”,难以尽数的网站都不约而同地开始了自己的“重构”。
- 数据库的选择原则是什么?我只知道小网站用Access,大网站用SQL,请问它的具体选择原则是什么?在实际应用中,数据库的选择原则一般是:如果
- Index.asp:程序代码<html><head><meta http-equiv="Conten
- 如果你能很好的理解我下面的一句话,那这些都不是问题了。asp是服务器端语言,它的作用是动态生成客户端浏览器所能识别的html css jav
- ASP 错误代码 说明 ASP 0100 内存不足 ASP 0101 意外错误 ASP 0102 需要字符串输入 ASP 0103 需要数字
- 阅读上一篇:FrontPage2002简明教程一:安装与界面FrontPage中对于文字与图像的处理与Word很相似,用过Word的人对于F
- 代码如下:--建立数据表createtable TestData ( ID int identity(1,1) primary key, D
- 通常我们在制作上图的时候,会分别给四个div加上不同的css属性,来实现中间间隔。但我们更希望的是不需要对html标签做标识,直接能通过cs