使用封装的事件函数不能添加mouseup事件,导致面板不能停止.
来源：4-2 [DOM事件] QQ面板拖拽效果（下）
周末00
2016-07-03 16:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM事件探秘</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#qq-wrap {
position: absolute;
margin: 0 auto;
padding: 20px 10px;
width: 580px;
height: 260px;
border: 1px solid gray;
border-radius: 15px;
}
#qq-top {
height: 44px;
width: 200px;
background: url(../QQ/images/login_window_logo.png) no-repeat -200px 0;
margin: 5px auto;
background-color: red;
}
#qq-con {
font-size: 1.2rem;
width: 230px;
margin: 0 auto;
}
#qq-con>div {
margin-top: 40px;
}
input {
font-size: 1rem;
}
input[type=submit] {
font-size: 1rem;
width: 80px;
margin: 0 20px 0 15px;
}
#state {
padding-top: 2px;
height: 29px;
font-size: 0rem;
}
#state .s-state {
display: inline-block;
height: 15px;
width: 110px;
vertical-align: bottom;
}
.s-state>span {
vertical-align: bottom;
display: inline-block;
/*width: 35px;*/
height: 15px;
line-height: 18px;
margin: 0 3px;
}
#state span:first-child {
width: 15px;
}
.online {
background: url(../QQ/images/ptlogin.png) 0 0 no-repeat;
}
.away {
background: url(../QQ/images/ptlogin.png) -18px 0 no-repeat;
}
.busy {
background: url(../QQ/images/ptlogin.png) -36px 0 no-repeat;
}
.nobody {
background: url(../QQ/images/ptlogin.png) -72px 0 no-repeat;
}
.please {
background: url(../QQ/images/ptlogin.png) -90px 0 no-repeat;
}
#state .state2 {
width: 10px;
background: url(../QQ/images/ptlogin.png) no-repeat -0px -18px;
}
#state span:last-child {
/*width: 90px;*/
font-size: 0.5rem;
}
#states {
width: 110px;
border: 1px solid #000;
font-size: 0.8rem;
margin-left: 115px;
display: none;
background-color: #fff;
}
#states .st-ico {
display: inline-block;
width: 15px;
height: 15px;
}
#states .st-text {
vertical-align: top;
}
#states .st-li {
text-indent: 20px;
}
#states .st-li:hover {
background-color: gray;
}
</style>
</head>
<body>
<div id="qq-wrap">
<div id="qq-top"></div>
<form id="qq-con" name="qq-con">
<div>
<label>账号</label>
<input type="text" name="user" placeholder="请输入QQ号或邮箱">
</div>
<div>
<label>密码</label>
<input type="password" name="password">
</div>
<div id="state">
<input type="submit" name="submit" value="确定">
<div>
<span></span>
<span></span>
<span>我在线</span>
</div>
</div>
<ul id="states">
<li id="online"><span class="st-ico online"></span><span>我在线</span></li>
<li id="away"><span class="st-ico away"></span><span>离线</span></li>
<li id="busy"><span class="st-ico busy"></span><span>忙碌</span></li>
<li id="nobody"><span class="st-ico nobody"></span><span>不在</span></li>
<li id="please"><span class="st-ico please"></span><span>请勿打扰</span></li>
</ul>
</form>
</div>
<script type="text/javascript">
var eventUtil = {
// 添加事件
addHandler:function(elem,type,handler){
if (elem.addEventListener) {
elem.addEventListener(type,handler,false);
}else if (elem.attachEvent) {
// IE type前需要加'on'
elem.attachEvent('on'+type,handler);
}else{
elem['on'+type] = handler;
}
},
// 删除事件
removeHandler:function(elem,type,handler){
if (elem.removeEventListener) {
elem.removeEventListener(type,handler,false);
}else if (elem.detachEvent) {
// IE type前需要加'on'
elem.detachEvent('on'+type,handler);
}else{
elem['on'+type]=null;
}
},
// 获取事件对象
getEvent:function(event){
return event?event:window.event;
},
// 获取事件对象的类型
getType:function(event){
return event.type;
},
// 获取事件对象的目标
getElement:function(event){
return event.target||event.srcElement;
},
// 阻止事件对象冒泡
stopPropagation:function(event){
if (event.stopPropagation) {
event.stopPropagation();
// 不要忘了加括号
} else {
event.cancelBubble = true;
}
},
// 阻止事件对象的默认行为
preventDefault:function(event){
if (event.preventDefault) {
event.preventDefault();
// 不要忘了加括号
} else {
event.returnValue = false;
// 这里注意boolean值
}
}
};
// QQ
var sState = document.getElementsByClassName('s-state')[0],
span_ico = sState.getElementsByTagName('span')[0],
states = document.getElementById('states'),
s_text = sState.getElementsByTagName('span')[2],
li_s = document.getElementsByClassName('st-li');
eventUtil.addHandler(sState,'click',function(event){
event = eventUtil.getEvent(event);
eventUtil.stopPropagation(event);
states.style.display = 'block';
});
for (var i = 0; i < li_s.length; i++) {
eventUtil.addHandler(li_s[i],'click',function(event){
event = eventUtil.getEvent(event);
eventUtil.stopPropagation(event);
states.style.display = 'none';
span_ico.className = this.id;
s_text.innerHTML = this.getElementsByClassName('st-text')[0].innerHTML;
});
}
// 点击空白区域,关闭下拉面板
document.onclick = function(){
states.style.display = 'none';
}
// 移动QQ面板
var qq_top = document.getElementById('qq-top'),
qq_wrap = document.getElementById('qq-wrap');
eventUtil.addHandler(qq_top,'mousedown',function(event){
mouseD(event);
});
function mouseD(event){
event = eventUtil.getEvent(event);
eventUtil.stopPropagation(event);
// 计算光标在面板中的距离
var disX = event.clientX-qq_wrap.offsetLeft,
disY = event.clientY-qq_wrap.offsetTop;
console.log(disX);
eventUtil.addHandler(document,'mousemove',function(event){
mouseM(event,disX,disY);
});
//这个mouseup事件我不知道要怎么写了
eventUtil.addHandler(document,'mouseup',function(event){
event = eventUtil.getEvent(event);
eventUtil.stopPropagation(event);
eventUtil.removeHandler(document,'mousemove',function(event){
mouseM(event);
});
});
}
function mouseM(event,posX,posY){
var winW=document.documentElement.clientWidth || document.body.clientWidth,
winH=document.documentElement.clientHeight || document.body.clientHeight,
maxW=winW-qq_wrap.offsetWidth,
maxH=winH-qq_wrap.offsetHeight;
// 注意此函数的参数,需要重新赋值
var event = eventUtil.getEvent(event);
eventUtil.stopPropagation(event);
// 计算移动中面板的位置
var L = event.clientX-posX,
T = event.clientY-posY;
if (L<0) {
L=0;
} else if(L>maxW){
L=maxW;
}
if (T<0) {
T=0;
} else if(T>maxH){
T=maxH;
}
qq_wrap.style.left = L+'px';
qq_wrap.style.top = T+'px';
console.log(event.clientX+'+'+event.clientY+'+'+L+'+'+T);
}
</script>
</body>
</html>
写回答
关注
1回答
-
- 我一定不是吃货
- 2016-07-06 10:04:51
eventUtil.addHandler(document,'mousemove',null);
你自己试试吧，
DOM事件探秘
DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件
99532 学习 · 1298 问题
相似问题