JS事件在IE与FF中的区别详细解析

之道的易搜项目中的搜索分类是通过JS动态生成的,每个生成的元素都要动态的添加属性、事件。其中,添加属性可以采用赋值的方式,这对IE和FF都是适用的。比如:

var element = document.createElement('select');

element.id = "myselect";

上面的语句在IE和FF中都会有同样的效果,并且运行正常。但是我们创建的元素,大部分是要给其动态添加事件的,显然,我们不能和添加属性一样,直接在后面打个dot,然后写个事件名,然后后面跟着一串代码,那样是会报错的。所以我们可以采用如下的方法来添加事件:

首先:我们要判断当前的浏览器是什么浏览器,我们仍然延用之前的定义,

if( element.attachEvent ){

//为IE以及IE内核的浏览器(1)

}else if( element.addEventListener){

//为FF以及NS内核的浏览器(2)

}

上面的if语句块就是帮我们完成当前浏览器是IE还是FF的判断。

浏览器判断出来,然后我们要做的就是把函数注册到元素里面。下面我们给出我们定义的一个功能函数:

function showElementId(elmt){

alert(elmt.id);

}

函数功能很简单,就是提示出参数里面的元素的ID。

如果是IE浏览器,我们把如下代码插入到上面的注释(1)处:

element.attachEvent( "onclick",function(){showElementId(elmt)});

如果是FF浏览器,我们把如下代码插入到上面的注释(2)处:

var eventName = "onclick".replace(/on(.*)/i,'$1');
element.addEventListener( eventName,function(){showElementId(elmt)},false);

因为在FF中给元素注册事件的时候,不需要事件名称前面的“on”,所以要把on给替换掉。

好啦,如果今后各位同行在开发项目中,遇到要用JS动态给元素添加事件的时候,就可以采用上面的方法。那样就可以避免用户在用FF浏览器时候不能使用你幸苦开发的功能了。

(0)

相关推荐

  • js文本框输入点回车触发确定兼容IE、FF等

    复制代码 代码如下: <head> <script> function EnterPress(e){ //传入 event var e = e || window.event; if(e.keyCode == 13){ document.getElementById("txtB").focus(); } } </script> </head> <body> <input type="text" id=

  • 引用 js在IE与FF之间的区别详细解析

    js调试工具推荐firefox的firebug插件 能够给js设置断点执行 能够运行时修改css样式 查看dom模型等 ☆IE8自带的developerbar也很不错 ☆打开firefox所有js警告:在地址栏里录入:about:config双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错 ☆IE->firefoxjavascript类 △document.all("id")->document.getElementById(

  • JavaScript在IE和FF下的兼容性问题

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 复制代码 代码如下: 一.函数和方法差异:二.样式访问和设置:三.DOM方法及对象引用:四.事件处理:五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码 代码如下: var year= new Date().get

  • Js event事件在IE、FF兼容性问题

    1.window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象. 如: 复制代码 代码如下: <input type="button" onmousemove="showDiv(event);"//event不需要加引号 function showDiv(event) { var event=window.event||event; event.clientX; event.c

  • js离开或刷新页面检测(且兼容FF,IE,Chrome)

    复制代码 代码如下: <!DOCTYPE html><html><head><script>  function closeIt()  {    return "Any string value here forces a dialog box to \n" +          "appear before closing the window.";  }  window.onbeforeunload = close

  • IE网页js语法错误2行字符1、FF中正常的解决方法

    今天开发过程中,突然遇到此奇葩问题,我之前以为是我js打开模态窗体传递的url参数有问题,我使用open没问题.使用模态窗体则会先弹出此错误然后再显示新打开的界面.网上查了许久,总结解决方案如下: 1. 可能与IE的某些插件冲突.请把所有无关的IE加载项全部禁用后尝试 2. 引用了不存在的js文件 3. 页面的某些文件在文档模型还没建立时就已经开始引用相关的节点 我最后是通过禁用了IE中的插件才解决的.

  • js加入收藏夹代码(兼容ie/ff/op)

    复制代码 代码如下: var www_jb51_net = function (obj, url, title) {    var e = window.event || arguments.callee.caller.arguments[0];    var B = {        IE : /MSIE/.test(window.navigator.userAgent) && !window.opera        , FF : /Firefox/.test(window.navig

  • JS IE和FF兼容性问题汇总

    1. document.form.item 问题 现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 解决方法: 改用 document.formName.elements["elementName"] 其它 参见 2 2. 集合类对象问题 现有问题: 现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能. 解决方法: 改用 [] 作为下标运算.如:document.f

  • JS的IE和Firefox兼容性集锦

    1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 (2)解决方法: 改用 document.formName.elements["elementName"] (3)其它 参见 2 2. 集合类对象问题 (1)现有问题: 现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能. (2)解决方法: 改用 [] 作为下标

  • IE、FF、Chrome浏览器中的JS差异介绍

    因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一.在平常的开发中,我们常使用的JS框架基本已经帮我们处理好了JS在各浏览器中的差异,但作为一个开发人员,还是有需要了解JS在浏览器中的差异. FF.Chrome:没有window.event对象 FF.Chrome:没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成:function handle(e){e = e || event

随机推荐