为什么释放鼠标不起作用?

来源:4-2 [DOM事件] QQ面板拖拽效果(下)

Chris_Stone

2016-08-17 16:03

//IE10-不支持getElementsByClassName

function getClass(className, parent) {

var oParent = parent ? document.getElementById(parent) : document;

var eles = [];

var elem = oParent.getElementsByTagName("*");

// alert(elem.length);

for (var i = 0; i < elem.length; i++) {

// alert(elem[0].className);

if (elem[i].className == className) {

eles.push(elem[i]);

}

}

return eles;

}


window.onload = drap;


function drap() {

var login = getClass("login_logo_webqq", "loginPanel")[0];

// var login = document.getElementsByClassName("login_logo_webqq")[0];

var loginPanel = document.getElementById("loginPanel");

// alert(login.className);

login.onmousedown = mDown;


function mDown(e) {

// alert("hello");

var postX, postY;

e = e || window.event;

postX = e.clientX - loginPanel.offsetLeft;

// alert(postX);

postY = e.clientY - loginPanel.offsetTop;


document.onmouseover = function(e) {

e = e || window.event;

mMove(e, postX, postY);

// alert(postX+" "+postY);

}

// 释放鼠标

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null; 

}

}


function mMove(e, postX, postY) {

var e = e || window.event;

var x, y;

x = e.clientX - postX;

y = e.clientY - postY;

// alert(x);

// 整个显示区域的宽度

var winW = document.documentElement.clientWidth || document.body.clientWidth;

winH = document.documentElement.clientHeight || document.body.clientHeight;

// alert(winW);

var offW = loginPanel.offsetWidth,

// alert(offW);

offH = loginPanel.offsetHeight;

var moveW = winW - offW,

moveH = winH - offH;

// alert(moveW);


if (x < 0) {

x = 0

} else if (x > moveW) {

x = moveW - 10;

}

if (y < 0) {

y = 10;

} else if (y > moveH) {

y = moveH;

}

loginPanel.style.left = x + 'px';

loginPanel.style.top = y + 'px';

document.title = x + " " + y;

}

}


写回答 关注

2回答

  • 慕娘3308515
    2016-08-17 18:13:28
    已采纳

    document.onmouseover = function(e) {}

    写错了吧,应该是 onmousemove


    Chris_...

    非常感谢!

    2016-09-09 09:26:43

    共 1 条回复 >

  • 枫的轻吟
    2016-09-08 19:03:47

    document.onmouseup = null;
     可以把这句注释了看看


DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99532 学习 · 1298 问题

查看课程

相似问题