本篇主要讨论了IE和FireFox在层的拖动实现过程中的一些不同和一些常见问题，其他元件的拖动也是同样的道理，这里以使用较多的层元件为例进行解释。
层的拖动涉及了以下三个鼠标事件：
onmousedown：点下鼠标
onmousemove：移动鼠标
onmouseup：松开鼠标
拖动基本过程：
点下鼠标时，开始拖动，记下鼠标指针位置与被拖动元件的相对位置x；
鼠标移动时，根据鼠标指针的位置和相对元件位置x计算出元件的位置，并设置元件位置；
松开鼠标时，要销毁鼠标移动的事件处理程序，停止拖动。
<html>
<head>
<title> Drag Demo 1 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'));
};
function drag(o){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx;
o.style.top=ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag">drag me<div>
</body>
</html>
代码注释：
1. 该实例使用drag()函数对某个元件添加事件处理程序以实现元件的拖动，传入的参数o为要被拖动的元件对象。
2. 必须将要拖动的元件的位置设置为绝对定位(absolute)，并设置左边距和顶边距。
3. layerX和layerY是Netscape的事件属性，表示事件相对于包容图层的X坐标和Y坐标，在IE中它们则是offsetX和offsetY。
4. setCapture()和captureEvents()分别是IE和Netscape进行设置事件捕获源的函数，在设置onmousemove和 onmouseup事件处理程序前必须使用，IE的setCapture可以针对某个特定的元件设置事件捕获，而Netscape中只能对整个文档设置，这将会导致一些问题。对应的停止捕捉事件函数为releaseCapture()和captureEvents()。
5. clientX、clientY以及pageX、pageY分别是IE和Netscape中事件发生位置相对于浏览器页面的X坐标和Y坐标。
有时要对拖动的范围做一个限定，比如窗口的滑动块，这时，只要稍稍修改onmousemove事件处理程序即可，在对元件定位前判断其位置。
修改后代码如下：
<html>
<head>
<title> Drag Demo 2 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};
function drag(o,r){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag">drag me<div>
</body>
</html>
增加的一个传入参数r指定了元件的移动范围，它是一个数组，包含的四个元素分别代表元件的左、右、上、下范围。
接下来看一个在FireFox下会出现的问题，代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};
function drag(o,r){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>
要拖动的层中包含的是一张图片而不再是文字，这样在IE中仍可以正常拖动，而在FireFox中会发生异常，点下鼠标、拉动、并松开后，层并没有停止拖动，而是跟随着鼠标。
仔细地分析了一下原因，就是上面说过的Netscape的captureEvent()不能捕获某个特定元件的事件，当点下鼠标并拉动时时，FireFox会认为要拖动的对象是层里的图片，该操作无效。
要解决这个问题，只要把图片上的鼠标点下事件设置为无效，在drag函数内加上 o.firstChild.onmousedown=function(){return false;}; 即可。
最终代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};
function drag(o,r){
o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};
d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head>
<body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>
分享到：
相关推荐
标题中的"IETab"是一个Firefox浏览器插件，它允许用户在Firefox中直接使用Internet Explorer（IE）的渲染引擎来打开网页。这个插件对于那些必须访问仅支持IE特性的网站的用户来说非常有用，因为某些老旧或特定的Web...
标题与描述均聚焦于“JavaScript在IE和Firefox(火狐)的不兼容问题解决”，这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题，尤其是在Internet Explorer（IE）和Mozilla Firefox...
然而，由于浏览器之间的兼容性问题，mxGraph在某些老旧版本的Internet Explorer（IE）和Firefox上可能会遇到挑战。"mxGraph破解包含ie和firefox"的描述暗示了我们正在处理如何让mxGraph在这些特定浏览器上正常运行的...
### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中，浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异，这导致了同样的代码在不同浏览器中的表现...
本文将深入探讨如何创建一个兼容Internet Explorer（IE）和Firefox浏览器的事件模型，特别是在实现拖动功能时所面临的挑战和解决方案。 首先，我们需要理解IE和Firefox在事件处理上的差异。在IE中，事件处理主要...
然而，由于不同的浏览器对其解析和执行的方式存在差异，尤其是IE（Internet Explorer）和Firefox，这导致了JavaScript在不同浏览器间的兼容性问题。这份文档“IE火狐的JavaScript兼容.doc”深入探讨了这些差异，并...
### IE和Firefox的JavaScript兼容性问题详解 #### 1. `document.formName.item("itemName")` 问题 在处理表单元素时，IE 和 Firefox 对 `document.formName.item("itemName")` 的支持存在差异。 **说明：** - **...
特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...
在互联网的早期，IE（Internet Explorer）和Firefox（火狐浏览器）是两个主要的Web浏览平台，它们在处理CSS（层叠样式表）和JavaScript方面存在显著的差异。这些差异对于开发者来说至关重要，因为它们影响了网站在...
经过三天的苦战，查询无数的国外网站终于实现了对IE和FireFox浏览器的URl地址实时监控。利用API和DDE分别对IE和FireFox进行了浏览器地址获取，完整的源码程序，与大家分享学习。后期将完善，实现对IE,FireFox,360,...
"Firefox IE Tab"是一款专为火狐浏览器设计的扩展，它允许用户在Firefox中以Internet Explorer内核的方式浏览网页。这个扩展对于那些需要在不同浏览器环境中测试网站兼容性的开发者或者经常在两个浏览器间切换的用户...
兼容IE和Firefox获得keyBoardEvent对象 在 JavaScript 编程中，获得keyBoardEvent对象是非常重要的，但是不同的浏览器对其支持不同。IE和Firefox是两种最常用的浏览器，它们对keyBoardEvent对象的支持存在一定的...
然而，由于不同浏览器的实现差异，特别是Internet Explorer（IE）和Firefox，开发者经常面临兼容性问题。以下是一些关键的JavaScript兼容处理策略： 1. **数组、集合类对象的元素访问** - IE支持`for...in`循环...
标题中的“本机cookie查看器（IE，firefox）cookieView_ie_firefox”指的是一个软件工具，专门用于查看本地计算机上Internet Explorer（IE）和Firefox浏览器的Cookie信息。Cookie是网站在用户计算机上存储的小型文本...
在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页布局和样式的语言，但不同的浏览器在解析和执行CSS规则时可能存在差异，尤其是在早期版本的Internet Explorer（IE）和Firefox之间。这个"CSS兼容IE和...
IE 和 Firefox 处理 DIV 元素边界的方式不同，IE 中的 DIV 元素的宽度和高度包括边框宽度，而 Firefox 中的 DIV 元素的宽度和高度不包括边框宽度。 7. 判断浏览器类型 可以使用 `var isIE=document.all ? true : ...
在写兼容IE和Firefox的拖动窗口代码时，需要特别注意这一点。 为了统一处理不同浏览器的行为，可以通过编写JavaScript代码来检测浏览器类型。如果浏览器支持document.all语法，则认为是IE浏览器，否则为Firefox。...
在网页设计中，CSS（层叠样式表）的兼容性是一个关键问题，特别是对于历史悠久的Internet Explorer（IE）和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同，开发者经常面临兼容性挑战。以下是一些针对...