码迷,mamicode.com
首页 > 其他好文 > 详细

阻止事件冒泡 和 阻止事件默认行为

时间:2018-09-23 18:24:35      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:block   false   on()   操作   元素   同事   空间   rop   htm   

1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,

2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

3.return false  ; 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

 

4.我们来看看几组demo,使用jquery进行DOM操作 这是html代码,div里面套了一个a标签,连接到百度

 

css代码,a标签占父元素的空间的1/4,背景颜色为红色; .box1{ height: 200px; width: 600px; margin: 0 auto; } .box1 a{ display: block; height: 50%; width: 50%; background:red; } 下面来看js代码,

第一种  //不阻止事件冒泡和默认事件 $(".box1").click(function(){ console.log("1")//不阻止事件冒泡会打印1,页面跳转; });

 

第二种 //阻止冒泡 $(".box1 a").click(function(event){ event.stopPropagation();//不会打印1,但是页面会跳转; }); $(".box1").click(function(){ console.log("1") });

 

第三种 $(".box1 a").click(function(event){ //阻止默认事件 event.preventDefault();//页面不会跳转,但是会打印出1, }); $(".box1").click(function(){ console.log("1"); });

 

第四种 $(".box1").click(function(){ console.log("1") }); //阻止冒泡 $(".box1 a").click(function(event){ event.stopPropagation(); //阻止默认事件 event.preventDefault() //页面不会跳转,也不会打印出1 })

 

第五种 $(".box1").click(function(){ console.log("1") }); $(".box1 a").click(function(event){ return false; //页面不会跳转,也不会打印出1,等于同时调用了event.stopPropagation()和event.preventDefault()

阻止事件冒泡 和 阻止事件默认行为

标签:block   false   on()   操作   元素   同事   空间   rop   htm   

原文地址:https://www.cnblogs.com/zhangyongxi/p/9693012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!