您的位置：首页 > Web前端 > JavaScript

常见的原生javascript事件处理与浏览器兼容问题（上）

2016-09-24 16:58 766 查看
在WEB前端开发中，处理各浏览器差异的问题是一个重要的部分。

不同浏览器的内核及解析方式不同，对对象名和方法名的定义不同，导致写出来的代码不能得到我们想要的效果。所以在开发的时候需要解决这些问题。浏览器差异体现在很多方面，本文主要对事件处理作出理解。

下面介绍处理浏览器差异的通解和举例说明一些事件处理机制的对象和方法处理。

常用浏览器差异处理


1.对象检测：可通过条件分支语句及三元操作符检测，例如：

function(){
if(typeOf(obj1)!='undefined'){
obj1();
}else {
obj2();
}
}

----------

typeOf(obj1) != 'undefined' ? obj1() : obj2();//三元操作符


2.判断一个属性是否存在最直接的方法是用JS对这个属性赋值。

（需要修改）

添加与删除事件：


添加事件在IE中 : attachEvent(“eventName”,func);

在FF中：addEventListener(“eventName”, func , bool );

其中bool里true代表事件捕获方式，false代表事件冒泡方式；

if(typeOf(document.addEventListenter != "undefined")){
document.addEventListenter("mousedowm",cli,true);//FF下
}else {
document.attachEvent("onmousedowm",cli);//IE下
}


删除事件在IE中 :dettachEvent(“eventName”,func);

在FF中：removeEventListener(“eventName”, func , bool );

if(typeOf(document.removeEventListenter != "undefined")){
document.removeEventListenter("mousedowm",cli,true);//FF下
}else {
document.dettachEvent("onmousedowm",cli);//IE下
}


阻止事件的默认行为：
比如阻止点击a标签后的跳转


FF : preventDefault();

IE : window.event.returnValue = false;

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script>
/*阻止事件的默认行为*/

function delDef(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
return false;
}
window.onload =function(){
var elem = document.getElementById("a1");
elem.onclick = function(e){
delDef(e);
}
}
</script>
</head>
<body>
<a id = "a1" href="http://www.google.com">www.google.com</a>
<a href="http://www.google.com">www.google.com</a>
</body>

</html>


总结：以上介绍了常用解决浏览器兼容的办法，并给出了事件添加与删除、阻止时间的默认行为的实例。主要用条件判断与三元操作解决该问题。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航