因为浏览器中有些品牌及型号有非凡的存在,有些办法不反对,这种事件就很让人头疼。比方在测试的时候,在谷歌浏览器好使,在IE下就不好使
caniuse网站中就能查到api在浏览器反对状况addEventListener
在IE6-8中就不反对stopPropagation
在IE6-8中也不反对preventDefault
有些浏览器反对状况还存在疑难
这种状况下有必要封装一个通用类及公共办法来反对此类事件。addEventListener
和removeEventListener
须要独自封装成一个类,实现比较简单,就是对该元素是否存在办法进行判断,如果存在就挂载,切实没有就手动挂载一个办法
class BomEvent {
constructor(element) {
this.element = element;
}
addEvent(type, handle) {
if (this.element.addEventListener) {
//事件类型、须要执行的函数、是否捕获
this.element.addEventListener(type, handle, false);
} else if (this.element.attachEvent) {
this.element.attachEvent("on" + type, function () {
handle.call(element);
});
} else {
this.element["on" + type] = handle;
}
}
removeEvent(type, handle) {
if (this.element.removeEventListener) {
this.element.removeEventListener(type, handle, false);
} else if (this.element.detachEvent) {
this.element.detachEvent("on" + type, handle);
} else {
this.element["on" + type] = null;
}
}
}
// 阻止事件 (次要是事件冒泡,因为IE不反对事件捕捉)
function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation(); // 规范w3c
} else {
event.cancelBubble = true; // IE
}
}
// 勾销事件的默认行为
function preventDefault(event) {
if (event.preventDefault) {
event.preventDefault(); // 规范w3c
} else {
event.returnValue = false; // IE
}
}
发表回复