火狐下无法注册onmousedown

allen_word
  • 34

做一个拖拽的效果 谷歌和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;
        }
    }
}

};

调试的情况如下:

初始化加载:

clipboard.png

点击div按下 无法触发onmousedown

查看事件绑定的情况如下
clipboard.png

回复
阅读 2.8k
1 个回答

找到问题了~原因在function(e) 这里 e必须是event如果输入function(e)的话
那么要改成e = arguments[0]||window.event;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏