-
onmousedown--当用户按下鼠标时触发 onmouseup---当用户放掉鼠标时触发 onmousemove---鼠标在移动时可以返回一个坐标值 offsetWidth,offsetHeight--网页中获取网页内容高度和宽度，可以用于获取网页中盒子的高度和宽度 用法：box.offsetWidth,box.offsetHeight Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left 原理：拖动的时候，光标位置在哪，面板位置就在哪，面板的坐标通过左上角的点来确定。 分析并解决Bug 1、确定光标在屏幕中的位置：clientheight/width 2、确定面板的位置：offsetwidth/height 3、面板的移动位置限制：四个方向 4、删除事件，mouseup方法查看全部
-
事件对象总结 1.DOM中的事件对象 event.stopPropagation();//阻止事件冒泡 （相当于Android中的拦截） event.preventDefalt();//阻止默认行为（例如：阻止a标签的href跳转） 2.IE中的事件对象 cancelBubble属性 用于阻止/取消事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡 returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为 注意：IE8之前获取event是window.event 兼容性写法： var eventUtil = { getEvent:function(event){ //或event=event||window.event; 非IE:event,IE:window.event return event?event:window.event; }, getType:function(event){ return event.type; //非IE与IE相同 }, getElementName:function(event){ //非IE:event.target，IE:event.srcElement return event.target || event.srcElement; }, preventDefault:function(event){ //判断对象方法是否存在时,要将方法当做属性来判断 if(event.preventDefault){ event.preventDefault(); //非IE方法处理 }else{ event.returnValue=false; //IE方法处理 } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); //非IE方法处理 }else{ event.cancelBubble=true; //IE方法处理 } } }查看全部
-
2.IE中的事件对象 a.type属性 用于获取事件类型 b.srcElement属性 用于获取事件目标 c.cancelBubble属性 用于阻止/取消事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡 d.returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为 getEvent:function(event){ return event?event:window.event;//或event=eventwindow.event; 非IE:event,IE:window.event }, getType:function(event){ return event.type; //非IE与IE相同 }, getElement:function(event){ return event.target event.srcElement; //非IE:event.target，IE:event.srcElement }, preventDefault:function(event){ if(event.preventDefault){//判断对象方法是否存在时,要将方法当做属性来判断[函数名后不加小括号:if(对象.方法函数)],很多方法没有返回值,即使有返回值也不一定是布尔值,如果是if(方法函数())时会出现不可预料的结果 event.preventDefault(); //非IE方法处理 }else{ event.returnValue=false; //IE方法处理 } }, stopPropagation:function(event){ if(event.stopPropagation){ //event.stopPropagation:以属性的形式进行判断 event.stopPropagation(); //非IE方法处理 }else{ event.cancelBubble=true; //IE方法处理 } }查看全部
-
onmousedown--当用户按下鼠标时触发 onmouseup---当用户放掉鼠标时触发 onmousemove---鼠标在移动时可以返回一个坐标值 offsetWidth,offsetHeight--网页中获取网页内容高度和宽度，可以用于获取网页中盒子的高度和宽度 用法：box.offsetWidth,box.offsetHeight Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left 原理：拖动的时候，光标位置在哪，面板位置就在哪，面板的坐标通过左上角的点来确定。 分析并解决Bug 1、确定光标在屏幕中的位置：clientheight/width 2、确定面板的位置：offsetwidth/height 3、面板的移动位置限制：四个方向 4、删除事件，mouseup方法查看全部
-
终于成功了0.0查看全部
-
2.IE中的事件对象 a.type属性 用于获取事件类型 b.srcElement属性 用于获取事件目标 c.cancelBubble属性 用于阻止/取消事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡 d.returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为 getEvent:function(event){ return event?event:window.event;//或event=event||window.event; 非IE:event,IE:window.event }, getType:function(event){ return event.type; //非IE与IE相同 }, getElement:function(event){ return event.target || event.srcElement; //非IE:event.target，IE:event.srcElement }, preventDefault:function(event){ if(event.preventDefault){//判断对象方法是否存在时,要将方法当做属性来判断[函数名后不加小括号:if(对象.方法函数)],很多方法没有返回值,即使有返回值也不一定是布尔值,如果是if(方法函数())时会出现不可预料的结果 event.preventDefault(); //非IE方法处理 }else{ event.returnValue=false; //IE方法处理 } }, stopPropagation:function(event){ if(event.stopPropagation){ //event.stopPropagation:以属性的形式进行判断 event.stopPropagation(); //非IE方法处理 }else{ event.cancelBubble=true; //IE方法处理 } }查看全部
-
我的思路应该还是比较好懂的 欢迎同学来看~查看全部
-
拖拽->鼠标跟随<br> 1、绑定鼠标点击事件<br> 2、获取鼠标坐标：clientX clientY (所有浏览器都支持此属性)<br> 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)<br> 4、将拖拽元素设置成绝对定位<br> 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)<br> 6、设置left、top限定，禁止元素拖出窗口<br> 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth<br> 8、拖拽元素绑定onmouseup事件，在此事件中注销onmousemove事件，完成元素拖拽的释放效果<br> 注意可以把left、top理解成x轴、y轴 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth查看全部
-
// 滑过滑过、离开、点击每个选项时 for(var i=0;i<as.length;i++){ as[i].onmouseover=function(){ this.style.background='#ccc'; } as[i].onmouseout=function(){ this.style.background='none'; } as[i].onclick=function(){ title.innerHTML=this.innerHTML; } } // 点击页面空白处时 document.onclick=function(){ menu.style.display='none'; } } }查看全部
-
在触发DOM的事件时都会产生一个对象事件对象event<br> 1.DOM中的事件对象<br> （1）type属性 用于获取事件类型<br> （2）target属性 用于获取事件目标 （3）stopPropagation()方法阻止事件冒泡。事件冒泡是从最具体的事件到最外层不具体的事件。 （4）preventDef()方法组织事件的默认行为，例如<a href="#" ></a>查看全部
-
事件处理程序查看全部
-
在js中所有用.都可以用[]代替 字符串与变量不能用+和.连接查看全部
-
attachEvent要加on查看全部
-
讨厌IE查看全部
-
IE事件处理程序：IE也提供了类似DOM2级事件处理程序 attachEvent()添加事件 detachEvent()删除事件 接收相同的两个参数：事件处理程序的名称和事件处理程序的函数。去掉了布尔值，不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡！ 在IE下给btn3添加事件 btn3.attachEvent('onclick',showMes); 注意：在IE事件处理程序上，又要把on加上 btn3.detachEvent('onclick',showMes); 支持IE事件处理程序的浏览器主要有IE和Opera两个浏览器。 2.跨浏览器事件处理程序 var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){element.addEventListener(type,handler,false);} // DOM2级事件处理程序 else if(element.attachEvent){element.attachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=handler;} // DOM0级事件处理程序 }, //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){element.removeEventListener(type,handler,false);} // DOM2级事件处理程序 else if(element.detachEvent){element.detachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=null;} //DOM0级事件处理程序 } } eventUtil.addHandler(btn3,'click',showMessage); 3.js中所有用'.'的地方都可以使用'[]'如：对象的点击事件element.onclick===element['onclick']查看全部
举报
0/150
提交
取消