阻止事件冒泡stopPropagation的兼容写法

阻止事件冒泡stopPropagation的兼容写法

function stopPropagation(e){

    e=window.event||e;

    if(document.all){  //只有ie识别

        e.cancelBubble=true;

    }else{

        e.stopPropagation();

    }

}

讲解：

window.event(其中window可以省略不写)代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。window.event这只在IE下是这样的，也就是说其他浏览器并不支持。window.event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。

 

cancelBubble 检测是否接受上层元素的事件的控制。 

语法： event.cancelBubble[ = cancelBubble] 

可能的值： 这是一个可读写的布尔值: 

true 不被上层元素的事件控制。 

false 允许被上层元素的事件控制。这是默认值。 

 

document.all 在各浏览器中的支持不同，最初是由 IE 浏览器拥有的，并不属于 W3C 规范范畴，他返回调用 all 方法的 HTML 标记自身内的所有子孙元素的 HTML 标记集合 。通常情况下使用 document.all 方法获得文档元素内所有 HTML 标记的集合，他最先使用在 IE 浏览器中。现在其他浏览器已经支持 document.all 这个方法了，但在支持细节上有差异。

1、所有浏览器使用 document.all 获取取元素的支持程度。

分析以下代码：

<script type="text/javascript">

    window.onload = function() {

        document.getElementById("info").innerHTML = "document.all : " + document.all;

    }

</script>

<span id="SPAN1"></span>

<div id="info"></div>

在各浏览器中运行结果如下表：

 

IE6 IE7 IE8(Q)            document.all : [object]

Opera Safari IE8(S)   document.all : [object HTMLColletion]

Firefox(Q)                    document.all : [object HTML document.all.class]

Firefox(S)                    document.all : undefined

Chrome                       document.all : [object HTMLColletion]

【注】：此处需要注意 Chrome 中 document.all 方法可直接使用，但无法被检测其返回的数据类型，因而代码中返回 undefined 值。

 

2、在 IE 中 document.all 的布尔值是 true ，其他浏览器都是 false。

分析以下代码：

<script type="text/javascript">

    window.onload = function() {

        document.getElementById("info").innerHTML = "!!document.all : " + !!document.all;

    }

</script>

<span id="SPAN1"></span>

<div id="info"></div>

在各浏览器中运行结果如下表：

IE6 IE7 IE8                                     !!document.all : true

Firefox Chrome Safari Opera     !!document.all : false

 

3、所有浏览器都支持使用 document.all 取元素的方式。

document.all是页面内所有元素的一个集合。例如:document.all(0)表示页面内第一个元素