第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

使用封裝的事件函數(shù)不能添加mouseup事件,導(dǎo)致面板不能停止.

<!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>賬號(hào)</label>
????????????????<input?type="text"?name="user"?placeholder="請(qǐng)輸入QQ號(hào)或郵箱">
????????????</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>請(qǐng)勿打擾</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;
??????}
???},
???//?獲取事件對(duì)象
???getEvent:function(event){
??????return?event?event:window.event;
???},
???//?獲取事件對(duì)象的類型
???getType:function(event){
??????return?event.type;
???},
??//?獲取事件對(duì)象的目標(biāo)
??getElement:function(event){
????return?event.target||event.srcElement;
??},
??//?阻止事件對(duì)象冒泡
??stopPropagation:function(event){
????if?(event.stopPropagation)?{
??????event.stopPropagation();
??????//?不要忘了加括號(hào)
????}?else?{
??????event.cancelBubble?=?true;
????}
??},
??//?阻止事件對(duì)象的默認(rèn)行為
??preventDefault:function(event){
????if?(event.preventDefault)?{
??????event.preventDefault();
??????//?不要忘了加括號(hào)
????}?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;
???});
}
//?點(diǎn)擊空白區(qū)域,關(guān)閉下拉面板
document.onclick?=?function(){
???states.style.display?=?'none';
}
//?移動(dòng)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);
???//?計(jì)算光標(biāo)在面板中的距離
???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);
???});
???//這個(gè)mouseup事件我不知道要怎么寫(xiě)了
???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;
??????//?注意此函數(shù)的參數(shù),需要重新賦值
??????var?event?=?eventUtil.getEvent(event);
??????eventUtil.stopPropagation(event);
??????//?計(jì)算移動(dòng)中面板的位置
??????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 回答

eventUtil.addHandler(document,'mousemove',null);

你自己試試吧，

0 回復(fù) 有任何疑惑可以回復(fù)我~
#1

周末00 提問(wèn)者

沒(méi)有效果
2016-07-07 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消

使用封裝的事件函數(shù)不能添加mouseup事件,導(dǎo)致面板不能停止.

我要回答 關(guān)注問(wèn)題
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)