移动端浏览器没报错无法看报错信息
移动端真机调试,引入vconsole
<script src="vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
Array.prototype.slice.call(document.getElementById("test").childNodes);
用上面的方法可以把 id 为 test 的子节点转换成数组
IE8及之前不能直接这样使用
解决方案
function toArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes); //非IE
} catch (e) {
array = new Array();
for (var i = 0; i < nodes.length; i++) {
array.push(nodes[i]);
}
}
return array;
}
事件处理
IE8及之前不支持addEventListener。同时IE8及之前只支持时间冒泡,通过attachEvent()添加的事件程序会被添加到冒泡阶段。
attachEvent和addEventListener 比较相似,除了attachEvent的事件参数都需要加上on ,事件触发的this指向的是window而不是被触发的元素作用域,绑定多个事件时顺序从后往前执行(和js原本的执行顺序相反)。
解决方案
/*
* element传入的是获取到的元素
* type传入的是监听的事件
* handler传入的是触发的函数
*/
var EventUtil = {
addHandler: function(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
if(element.removeEventListener) {
element.removeEventListener(type, handler);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
事件对象属性差别
IE中的事件对象是window.event,同时event.srcElement与DOM中的event.target相同。DOM 0级中,等于this。在DOM 2级中不等于this。
var myBtn = document.getElementById('myBtn');
myBtn.onclick = function(){
console.log(this.innerText); //正常内容,此时this指向window.event.srcElement
};
myBtn.attachEvent('onclick', function(event){
console.log(this.innerText); //undefinde,此时this指向的是document对象
});
IE的event.cancelBubble属性(赋值为true或false) 和 DOM里的event.stopPropagation() 相同
IE的event.returnValue属性(赋值为true或false) 和 DOM里的event.preventDefault() 相同
兼容性解决方案:
var EventUtil = {
getEvent: function(e) {
return e ? e : window.event;
},
getTarget: function(e) {
return e.target: e.srcElement;
},
preventDefault: function(e) {
if(e.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(e) {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
btn.onclick = function(e) {
e = EventUtil.getEvent;
EventUtil.stopPropagation(e);
}
事件区别
鼠标滚轮事件
大部分浏览器中滚轮事件为mousewheel,FireFox里是DOMMouseScroll。
同时mousewheel往前是120的倍数,往后是-120的倍数。
但是在FireFox里,往前滚是-3的倍数,往后滚是3的倍数。数值乘上40再将正负数对换解决兼容问题。
键盘事件
除了FireFox,向上键、向下键等特殊键不会触发keypress事件。
现代浏览器按键字符编码是event.keyCode,IE8及之前用的是event.charCode。
event.keyCode在Firefox里,字母及数字都为0,向上键、向下键等特殊键显示字符编码。而event.which 则是向上键向下键等特殊键都为0,字母及数字正常显示字符编码。