js中的preventDefault與stopPropagation詳解

1. preventDefault: javascript

  好比<a href="http://www.baidu.com">百度</a>,這是html中最基礎的東西,起的做用就是點擊百度連接到http://www.baidu.com,這是屬於<a>標籤的默認行爲;preventDefault方法就是能夠阻止它的默認行爲的發生而發生其餘的事情;html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS阻止連接跳轉</title>
 6 <script type="text/javascript"> 
 7 function stopDefault( e ) { 
 8 if ( e && e.preventDefault ) 
 9    e.preventDefault(); 
10     else 
11    window.event.returnValue = false; 
12 
13     return false; 
14 } 
15 </script> 
16 </head>
17 <body>
18 <a href="http://www.baidu.com" id="testLink">百度</a> 
19 <script type="text/javascript"> 
20 var test = document.getElementById('testLink'); 
21 test.onclick = function(e) { 
22    alert('個人連接地址是:' + this.href + ', 可是我不會跳轉。'); 
23    stopDefault(e); 
24 } 
25 </script>
26 </body>
27 </html>

此時點擊百度連接,不會打開http://www.baidu.com,而只是彈出一個alert對話框java

2. stopPropagation :瀏覽器

  起到阻止js事件冒泡的做用;ui

  2.1 講stopPropagation方法以前必需先給你們講解一下js的事件代理: this

  (1) 事件代理用到了兩個在JavaSciprt事件中常被忽略的特性:事件冒泡以及目標元素spa

  事件冒泡: 當一個元素上的事件被觸發的時候,好比說鼠標點擊了一個按鈕,一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡;這個事件從原始元素開始一直冒泡到DOM樹的最上層..net

  目標元素: 對任何一個事件來講,其目標元素都是原始元素,在咱們的這個例子中也就是按鈕。目標元素它在咱們的事件對象中以屬性的形式出現。使用事件代理的話咱們能夠把事件處理器添加到一個元素上,等待事件從它的子級元素裏冒泡上來,而且能夠很方便地判斷出這個事件是從哪一個元素開始的。代理

  下面看一段代碼:code

<!DOCTYPE html>
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
    <title> 阻止JS事件冒泡傳遞(cancelBubble 、stopPropagation)</title>
    <meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
    <script>
        function doSomething (obj,evt) {
            alert(obj.id);
            var e=(evt)?evt:window.event;
            if (window.event) {
                e.cancelBubble=true;// ie下阻止冒泡
            } else {
                //e.preventDefault();
                e.stopPropagation();// 其它瀏覽器下阻止冒泡
            }
        }
    </script>
</head>
<body>
    <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
        <p>This is parent1 div.</p>
         <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
            <p>This is child1.</p>
         </div>
        <p>This is parent1 div.</p>
    </div>
    <br />
    <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
         <p>This is parent2 div.</p>
         <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
            <p>This is child2. Will bubble.</p>
         </div>
         <p>This is parent2 div.</p>
    </div>
</body>
</HTML> 

 

參考:http://www.jb51.net/article/46379.htm

相關文章
相關標籤/搜索