event对象

IE 中可以直接使用 event 对象,而 FF 中则不可以,解决方法之一如下:
var theEvent = window.event || arguments.callee.caller.arguments[0];

第二种是将 event 作为参数来传递:
function xxx(e){var theEvent = window.event || e;}

srcElement 和 target

在 IE 中 srcElement 表示产生事件的源,比如是哪个按钮触发的 onclick 事件,FF 中则是 target。

var theEvent = window.event || arguments.callee.caller.arguments[0];
var theObj=theEvent.target || theEvent.srcElement;

例子:

document.onclick = function(e){
           var theEvent = window.event || e;
           var theObj=theEvent.target || theEvent.srcElement;

function clickAction(){
       var theEvent = window.event || arguments.callee.caller.arguments[0];
       var theObj=theEvent.target || theEvent.srcElement;

// do something;
}

function clickAction(e){
       var theEvent = window.event || e;
       var theObj=theEvent.target || theEvent.srcElement;

// do something;
}

event.keyCode 和event.which

FF不支持window.event.keyCode,代替着是event.which

列子:

//在网页上面屏蔽tab键的代码
document.onkeydown = function (e){
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which;
            if(code == 9){
              return false;
            }
}

============

Query对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

jQuery.Event 的文档 中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。

jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();

  1. $("p").click(function(event){
  2. event.stopPropagation(); // do something
  3. })
  1. <span style="font-size:18px;">$("p").click(function(event){
  2. event.stopPropagation(); // do something
  3. })</span>

但是这个方法对使用live 绑定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false;

  1. $("p").live("click", function(){
  2. $(this).after("Another paragraph!");
  3. return false;
  4. });
  1. <span style="font-size:18px;">$("p").live("click", function(){
  2. $(this).after("Another paragraph!");
  3. return false;
  4. });</span>

另外 JavaScript 阻止冒泡

 阻止冒泡事件的方法有两种,第一种是IE的方法,第二种是DOM方法,至于为什么要分为两种方法去讨论之,这里就不做讨论了,总之是浏览器一些蹩脚的问题,好了废话不说了,直接贴代码了:

  1. //阻止冒泡事件
  2. function stopBubble(e) {
  3. if (e && e.stopPropagation) {//非IE
  4. e.stopPropagation();
  5. }
  6. else {//IE
  7. window.event.cancelBubble = true;
  8. }
  9. }
  1. <span style="font-size:18px;">   //阻止冒泡事件
  2. function stopBubble(e) {
  3. if (e && e.stopPropagation) {//非IE
  4. e.stopPropagation();
  5. }
  6. else {//IE
  7. window.event.cancelBubble = true;
  8. }
  9. }</span>

举个例子:就是谷歌首页的更多选项吧,不知道的可以去看看http://www.google.com/ 。
这里要应用两个点击事件,一个是div.onclick,另一个就是document.onclick,那么问题就出现了,在调用 div.onclick的时候,由于冒泡事件的存在,会自动的调用document.onclick,由于冒泡的顺序是从里向外的

(div->body->document->html)所以div.onclick事件就会被覆盖掉,也就不会执行了,解决的方案其实也是很简单的哦,就是在执行div.onclick的时候阻止冒泡事件就好了,那怎么阻止呢,就调用上面的函数就ok了!哈哈! 
ps:在介绍一下阻止浏览器默认行为的方法,大同小异,这里就不再赘述了。

    1. function stopDefault(e) {
    2. //阻止默认浏览器动作(W3C)
    3. if (e && e.preventDefault)
    4. e.preventDefault();
    5. //IE中阻止函数器默认动作的方式
    6. else
    7. window.event.returnValue = false;
    8. return false;
    9. }

IE和FireFox中JS兼容之event .的更多相关文章

  1. [转]IE和FireFox中JS兼容之event .

    转载于:http://blog.csdn.net/jiachunfeng/article/details/6448186 http://justcoding.iteye.com/blog/587876 ...

  2. css padding在ie7、ie6、firefox中的兼容问题

    padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...

  3. 原型扩展的方法解决IE和Firefox的Js兼容问题

    if(!document.all){//textContent->text    Element.prototype.__defineGetter__('text',function(){ret ...

  4. js事件源window.event.srcElement兼容性写法

    <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcE ...

  5. JS中的兼容问题总结

    今天总结总结在JS里面遇到的兼容性问题 1.获取滚动距离的兼容性问题: document.documentElement.scrollTop  ||  document.body.scrollTop ...

  6. JS网站当前日期在IE9、Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

    JS网站当前日期在IE9.Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

  7. [转]FireFox与IE 下js兼容触发click事件的代码

    本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...

  8. JS中的offset scroll event client

    一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...

  9. JS中浏览器兼容问题

    body的子节点IE 火狐 显示3个  其他显示7个 float浮动中的兼容 link 操作外联的兼容

随机推荐

  1. ASP.NET之Ajax系列(三)

    我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...

  2. UI基础:UICollectionView

    UITableView 和 UICollectionView的设计思路: 1.UITableView 的布局由TableView和UItableViewDelegate完成. 2.UICollecti ...

  3. sqlite 数据类型详解

    大多数的数据库引擎(到现在据我们所知的除了sqlite的每个sql数据库引擎)都使用静态的.刚性的类型,使用静态类型,数据的类型就由它的容器决定,这个容器是这个指被存放的特定列. Sqlite使用一个 ...

  4. 1、SQL基础整理(基本查询)

    分离.附加.备份.还原 --去重 select distinct 列名from表名 --更新 update fenshu set name = ‘李四’where code = 9 --更改表名 sp ...

  5. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  6. PotPlayer播放器——最强大的播放器 - imsoft.cnblogs

    PotPlayer下载:链接 http://pan.baidu.com/s/17vgMM 密码: 8buc PotPlayer关联图标修改方法:打开安装目录替换目录下的PotIcons.dll文件即可 ...

  7. jsonp跨域请求数据实例——手机号码查询

    前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 上篇博客 ...

  8. 三级联动查询全国省市区(xml与数据库)

    提供有china.xml和china.sql文件,实现全国省市区的三级联动效果 一.xml实现 import java.awt.EventQueue; import javax.swing.JFram ...

  9. MySQL复制的基本概念和实现

    MySQL的复制的概念是完成水平扩展的架构 MySQL性能方面的扩展方式有scale on(向上扩展,垂直扩展)                          scale out(向外扩展,水平扩 ...

  10. POJ2125 Destroying The Graph (最小点权覆盖集)(网络流最小割)

                                                          Destroying The Graph Time Limit: 2000MS   Memo ...