做一个拖拽的效果 谷歌和IE测试没问题 火狐突然出现无法注册onmousedown事件的问题
代码如下
html:
<!-- 用户详细信息展示栏 -->
<div id="user_message">
<h2 id="ip">User Ip</h2>
<p class="text_ip"></p>
<h3 id="message">User Apply Message</h3>
<p class="text_message"></p>
</div>
css:
/用户信息展示div/
div#user_message{
position:absolute;
width:400px;
height:400px;
z-index:9999;
background-color:#E0E0E0;
}
我的javascript用的我自己封装的库
javascript :
window.onload = function(){
wk('#user_message').drag();
}
/*
*物体拖拽
*
*注意:需要使用到该节点 onmouseDown onmouseUp onmouseMove事件
CSS必须设置position: absolute;
*
*@ index = 需要处理节点的索引,如果未输入 则处理this.Element[0]
*
*
*无返回
*/
$Wk_Base.prototype.drag = function(index){
var index_num;
var e,
obj;
var diffx,
diffy,
//style
left,
top;
if(arguments.length === 0){
obj = this.Element[0];
obj.onmousedown = function(e){
e = event||window.event;
//解决IE独有的鼠标超出浏览器不能获取的问题
if(typeof this.setCapture !== 'undefined'){ obj.setCapture();}
diffx = e.clientX - obj.offsetLeft;
diffy = e.clientY - obj.offsetTop;
document.onmousemove = function(e){
e = event||window.event;
left = e.clientX - diffx;
top = e.clientY - diffy;
//防止左右超出
if(left <0){
left = 0;
}else if(left > Getinner().width - obj.offsetWidth){
left = Getinner().width - obj.offsetWidth;
}
//防止上下超出
if(top <0){
top = 0;
}else if(top > Getinner().height - obj.offsetHeight){
top = Getinner().height - obj.offsetHeight;
}
obj.style.left = left+'px';
obj.style.top = top+'px';
}
document.onmouseup = function(){
//解决IE独有的鼠标超出浏览器不能获取的问题
if(typeof this.releaseCapture !== 'undefined'){ obj.releaseCapture();}
document.onmousemove = null;
document.onmouseup = null;
}
}
}else{
index_num = Math.round(index);
obj = this.Element[index_num];
obj.onmousedown = function(e){
e = event||window.event;
//解决IE独有的鼠标超出浏览器不能获取的问题
if(typeof this.setCapture !== 'undefined'){ obj.setCapture();}
diffx = e.clientX - obj.offsetLeft;
diffy = e.clientY - obj.offsetTop;
document.onmousemove = function(e){
e = event||window.event;
left = e.clientX - diffx;
top = e.clientY - diffy;
//防止左右超出
if(left <0){
left = 0;
}else if(left > Getinner().width - obj.offsetWidth){
left = Getinner().width - obj.offsetWidth;
}
//防止上下超出
if(top <0){
top = 0;
}else if(top > Getinner().height - obj.offsetHeight){
top = Getinner().height - obj.offsetHeight;
}
obj.style.left = left+'px';
obj.style.top = top+'px';
}
document.onmouseup = function(){
//解决IE独有的鼠标超出浏览器不能获取的问题
if(typeof this.releaseCapture !== 'undefined'){ obj.releaseCapture();}
document.onmousemove = null;
document.onmouseup = null;
}
}
}
};
调试的情况如下:
初始化加载:
点击div按下 无法触发onmousedown
查看事件绑定的情况如下
找到问题了~原因在function(e) 这里 e必须是event如果输入function(e)的话
那么要改成e = arguments[0]||window.event;