-
[面板狀態切換效果Part3] Code:Part2 // 鼠標滑過、離開和點擊狀態列表時 for(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover=function(){ this.style.background='#567'; } lis[i].onmouseout=function(){ this.style.background='#FFF'; } lis[i].onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } var id=this.id; stateList.style.display='none'; stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML; // 雖然getByClass返回結果只有一個, 但是他還是陣列的模式, 所以"[0]"還是要加 loginStateShow.className=''; loginStateShow.className='login-state-show '+id; } } // 點擊其他區域的時候, 自動取消選擇列表(隱藏菜單) document.onclick=function(){ stateList.style.display='none'; } }查看全部
-
[面板狀態切換效果Part2] Code:Part1 function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; // 拖曳 oTitle.onmousedown=fnDown; // 關閉 var oClose=document.getElementById('ui_boxyClose'); oClose.onclick=function(){ document.getElementById('loginPanel').style.display='none'; } // 切換狀態 var loginState=document.getElementById('loginState'), stateList=document.getElementById('loginStatePanel'), lis=stateList.getElementsByTagName('li'), stateTxt=document.getElementById('login2qq_state_txt'), loginStateShow=document.getElementById('loginStateShow'); loginState.onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } stateList.style.display='block'; }查看全部
-
[面板狀態切換效果Part1] 1.首先分析實現原理；然後分析要取出的對象，進行取出；再給對象綁定事件； 2.分析各種事件，並對其件進行函數封裝； 3.塊的裡面的文字（狀態、下）不見了：用負縮進把他們搞到窗口之外了，當代碼注釋使用。 4.在適當的地方阻止事件冒泡： ul父元為div，點擊li時希望ul隱藏，點擊div時希望其顯示，在點擊li後會冒泡到div ,因而需要阻止冒泡； 注意區分onmousedown和onclick，只能阻止相對應類型事件。 重點：利用事件冒泡實現切換狀態菜單；當一個塊內包含眾多事件時，必須要注意到事件冒泡的影響。 5.在其他任何地方點擊，要使列表隱藏：document.onclick是代表在頁面的任何地方點擊事件。 document下的子元素還有一個onclick事件，所以要注意事件冒泡的影響；查看全部
-
1、任何能够跟着鼠标移动的东西 都要有一个前提：绝对定位 2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。 所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。 3、ie10以前版本不支持document.getElementsByClassName，所以要用js封装getClass方法，获取class 4、实现随鼠标拖动，需要让窗口的坐标随着鼠标移动，鼠标的坐标保存在事件的clientX和clientY两个属性中。 5、onmousedown鼠标按下，窗口和鼠标的位置同步；element.style.left/top=clientX/Y+'px'; 6、onmousemove当鼠标指针在元素内部移动时重复地触发查看全部
-
Dom中的事件对象event查看全部
-
什么是事件对象？在触发DOM上的事件时都会产生一个对象 事件对象EVENT ①DOM中的事件对象 属性 （1）、type属性用于获取事件类型 （2）、target属性用于获取事件目标 （3）、stopPropagation()方法 用于阻止事件冒泡 （4）、preventDefault() 方法 阻止事件的默认行为 如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外） 如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法 如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法查看全部
-
阻止默认行为查看全部
-
阻止事件默认行为查看全部
-
阻止事件冒泡 event.stopPropagation();查看全部
-
.等同与[]查看全部
-
事件对象查看全部
-
事件处理程序查看全部
-
跨浏览器事件处理 如果支持 Dom2级。。如果支持 TE。。。最后 Dom0级。。 添加句柄 三个参数 元素、事件、句柄handler 事件为了方便一律传入时 去掉on 在除了Dom2级的其他手动添加on element.onclick===element['onclick'] element['on'+type]=handler;查看全部
-
事件冒泡查看全部
-
1、1、getElementsByClassName这个函数兼容性不好，(js ie10以下版本不支持document.getElementsByClassName) 最好自己造一个：js封装getClass方法，获取class。理解getClass方法的构造原理。 2、数组的push方法：可向数组的末尾添加一个或多个元素，并返回新的长度 3、任何能够跟着鼠标移动的东西 都要有一个前提：绝对定位！ 4、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件event的clientX和clientY属性中。 所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。 5、实现随鼠标拖动，需要让窗口的坐标随着鼠标移动，鼠标的坐标保存在事件event的clientX和clientY两个属性中。 PS：document.onclick是代表在页面的任何地方点击事件。 6、onmousedown鼠标按下，窗口和鼠标的位置同步——onmousemove：当鼠标指针在元素内部移动时重复地触发 element.style.left/top=clientX/Y+'px';（这样有bug，需要求出光标落点距离面板的位置） //封装一个getByClass的方法 function getByClass(clsName,parent){ var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsName){ eles.push(elements[i]); } } return eles; }查看全部
举报
0/150
提交
取消