阻止事件冒泡,阻止默認事件,event.stopPropagation()和event.preventDefault(),return false的區別
阿新 • • 發佈:2018-05-26
attr htm pre 點擊 操作 連接 com spa ati
1.event.stopPropagation()方法
這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是默認事件任然會執行,當你掉用這個方法的時候,如果點擊一個連接,這個連接仍然會被打開,
2.event.preventDefault()方法
這是阻止默認事件的方法,調用此方法是,連接不會被打開,但是會發生冒泡,冒泡會傳遞到上一層的父元素;
3.return false ;
這個方法比較暴力,他會同事阻止事件冒泡也會阻止默認事件;寫上此代碼,連接不會被打開,事件也不會傳遞到上一層的父元素;可以理解為return false就等於同時調用了event.stopPropagation()和event.preventDefault()
4.我們來看看幾組demo,使用jquery進行DOM操作
這是html代碼,div裏面套了一個a標簽,連接到百度
[html] view plain copy
- <div class="box1">
- <a href="http://www.baidu.com" target="_blank"></a>
- </div>
css代碼,a標簽占父元素的空間的1/4,背景顏色為紅色;
[html] view plain copy .box1{- height: 200px;
- width: 600px;
- margin: 0 auto;
- }
- .box1 a{
- display: block;
- height: 50%;
- width: 50%;
- background:red;
- }
下面來看js代碼,第一種
[html] view plain copy //不阻止事件冒泡和默認事件- $(".box1").click(function(){
- console.log("1")//不阻止事件冒泡會打印1,頁面跳轉;
- });
第二種
[html] view plain copy- //阻止冒泡
- $(".box1 a").click(function(event){
- event.stopPropagation();//不會打印1,但是頁面會跳轉;
- });
- $(".box1").click(function(){
- console.log("1")
- });
第三種
[html] view plain copy- $(".box1 a").click(function(event){
- //阻止默認事件
- event.preventDefault();//頁面不會跳轉,但是會打印出1,
- });
- $(".box1").click(function(){
- console.log("1");
- });
第四種
[html] view plain copy- $(".box1").click(function(){
- console.log("1")
- });
- //阻止冒泡
- $(".box1 a").click(function(event){
- event.stopPropagation();
- //阻止默認事件
- event.preventDefault() //頁面不會跳轉,也不會打印出1
- })
第五種
[html] view plain copy- $(".box1").click(function(){
- console.log("1")
- });
- $(".box1 a").click(function(event){
- return false; //頁面不會跳轉,也不會打印出1,等於同時調用了event.stopPropagation()和event.preventDefault()
- });
阻止事件冒泡,阻止默認事件,event.stopPropagation()和event.preventDefault(),return false的區別