当父层 与子层 有相同的事件时,但子层跟父层执行的内容却不一样时

为了 防止 父层事件对子层造成影响我们可以在子层的方法里做如下操作

function A (event){

  event.stopPropagation();

.....

}

这样我们操作子层的时候 ,父层相同的 事件就不会起作用啦

IE兼容

    function fn2(e){

        //这里做浏览器兼容,如果提供了event 就说明他不是IE
if(e && e.stopPropagation){
e.stopPropagation();
}else {
//IE方式处理事件冒泡
window.event.cancelBubble = true;
} alert("this is btn");
}

js 冒泡事件阻止 父层事件影响子层的更多相关文章

  1. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  2. js冒泡,阻止冒泡

    js 冒泡事件 阻止冒泡 window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = ...

  3. 事件穿透父层 直达子层 pointer-events:none

    之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom的事件操作,点击之类的就失灵了.之前我的做法要么就是在canvas上加入点击事件,穿透到下层,或者把 ...

  4. WPF系列之二:解耦View层控件事件与ViewModel层事件的响应

    以前的做法: 1.当项目的时间比较紧迫的时候,对UI层中控件的事件的处理,往往采取的是类似Winform中最简单的做法,直接做一个事件的Handler直接去调用VM层的方法. 2.控件只有一个Comm ...

  5. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

  6. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  7. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  8. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  9. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

随机推荐

  1. MySQL Server and Server-Startup Programs

    1. mysqld-The MySQL Server mysqld,also known as mysql server, is the main program that does most of ...

  2. 数据结构(C语言版)-第2章 线性表

    #define MAXSIZE 100 //最大长度 typedef struct { ElemType *elem; //指向数据元素的基地址 int length; //线性表的当前长度 }SqL ...

  3. English trip V1 - B 14. There Are Flowers in My Office 我办公室里有花 Teacher:Lamb Key: There be(is/are)

    In this lesson you will learn to describe a room or place. 这节课讲学习描述一个房间或地方 课上内容(Lesson) 1. Where do ...

  4. Tensorflow手写数字识别---MNIST

    MNIST数据集:包含数字0-9的灰度图, 图片size为28x28.训练样本:55000,测试样本:10000,验证集:5000

  5. vue.js面试题整理

    Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...

  6. Fox And Dinner CodeForces - 510E (最大流)

    大意: n只狐狸, 要求分成若干个环, 每个环的狐狸不少于三只, 相邻狐狸年龄和为素数. 狐狸年龄都>=2, 那么素数一定为奇数, 相邻必须是一奇一偶, 也就是一个二分图, 源点向奇数点连容量为 ...

  7. 基于Mybatis实现一个查库的接口

    基本功能就是写一个接口,该接口的主要功能是根据给的条件查询特定表: 先通过Workbench来看一下在给定条件下的查询的结果,先给出最终的结果查询的表以及查询的条件: 也就是该接口实现在image_t ...

  8. ubuntu 远程登录服务器和服务器中下载代码

    1.首先用远程登录:ssh 名称@地址 2.提示输入密码. 3.进入到你所要文件目录. 输入:tar cf 文件明.tar 你自己喜欢的文件/ 下载:scp erpAmazonAPI.tar 主机名称 ...

  9. 完全揭秘log file sync等待事件-转自itpub

    原贴地址:http://www.itpub.net/thread-1777234-1-1.html   谢谢 guoyJoe 老大 这里先引用一下tanel poder大师的图: 什么是log fil ...

  10. Oracle date timestamp 毫秒 - 时间函数总结(转)

    原文地址:Oracle date timestamp 毫秒 - 时间函数总结 yyyy-mm-dd hh24:mi:ss.ff  年-月-日 时:分:秒.毫秒 --上一月,上一年select add_ ...