取消冒泡

w3c取消冒泡

e.stopPropagation();

IE取消冒泡

e.cancelBubble();

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取消冒泡</title>
</head>
<body>
<div id="box1" style="background: #ABCDEF; width: 300px;height: 300px;">
    <input type="button" value="test1" id="btn1">
</div>
<script>
    var btn1 = document.getElementById("btn1");
    var box1 = document.getElementById("box1");
    btn1.onclick = function (e) {
        alert("button clicked");
        var e = e||window.event;//兼容ie
        if(typeof e.cancelBubble == "undefined"){
            e.stopPropagation();
        }else {
            e.cancelBubble = true;
        }
    };
    box1.onclick = function () {
        alert("div clicked")
    };
    document.body.onclick = function () {
        alert("body clicked")
    };
    document.documentElement.onclick = function () {
        alert("html clicked")
    };
    document.onclick = function () {
        alert("document clicked")
    }
</script>
</body>
</html>
时间: 2024-12-10 16:15:07

取消冒泡的相关文章

移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ie6到10) 2.事件名称有on 3.事件函数执行的顺序:标准ie->正序 非标准ie->倒序 4.this指向window 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 1.有捕获 2.事件名称没有on 3.事件执行的顺序是正序 4.this触发该事件的对象

JS:event对象下的target属性和取消冒泡事件

1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = function(){  alert(123);//123 } event对象下的target方法 :获取事件的目标,不用document.getElementById("box")即可获取目标; //W3C下 document.onclick = function(evt){ var e = evt

javascript 事件冒泡与取消冒泡

事件冒泡:当一个元素上的事件被触发时,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先中被触发,这一过程被称为事件冒泡. 这个事件从原始祖先开始,一直冒泡到DOM树的最上层.(bug) (本来应该一人做事一人当,结果我做错了事,你却去告诉了我妈) 简单来说,冒泡就是:子元素事件被触动,父盒子的同样事件也会被触动. 取消冒泡就是取消这种机制. 阻止冒泡: 火狐.谷歌.IE11:event.stopPropagation(); IE10以下:event.cancelBubble = tr

一个兼容ie,火狐等浏览器的取消冒泡代码

这个bug只有懂的人懂,三步搞定所有问题.为了大家能复制,上代码: function stopHandler(event) {            window.event ? window.event.cancelBubble = true : event.stopPropagation();                   }

JavaScript中的事件冒泡定义及取消

事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发.触发的顺序是“由内而外” . 验证:在页面上添加一个div.p.strong,在div.p.strong中添加onclick事件响应 取消事件冒泡: window.event.cancelBubble = true;//IE下的写法. arguments[0].stopPropagation();//火狐中的写法. 例子: <html xmlns="http://www.w3.

解析Javascript事件冒泡机制(转) 本文转自:http://blog.csdn.net/luanlouis/article/details/23927347

本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 . 2. 冒泡机制 什么是冒泡呢? 下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面.在上升的过程中

对于冒泡法的一些看法

冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成. 冒泡排序算法的运作如下: ?1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 3.针对所有的元素重复以上的步骤,除了最后一个. 4.持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比

javascript事件冒泡

1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 . 2.冒泡机制 什么是冒泡呢? 下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面.在上升的过程中,气泡会经过不同深度层次的水. 相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树:事件从dom 树的

事件捕获和事件冒泡(二)

事件冒泡 当一个元素接受到事件的时候,会把它接收到的所有事件传播给它的父级,一直到顶层window,叫事件冒泡机制: 例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>事件冒泡</title> <style> div{padding:40px;} #div1{ background: r