關於Javascript中的點擊事件冒泡的問題,很多初學者都處理不好。
什么是點擊事件冒泡?
例:
今天我去小明家找他玩。正好小明、小明的爸爸、小明的爺爺在客廳一起看電視。
我對小明說:”咱們出去玩吧“。
小明十分樂意的回答到:”好啊“。
小明的爸爸聽到后,說到:”把作業寫完后在出去玩“。
小明的爺爺也發話了:”預報有雷陣雨,就別出去玩了“。
我本來只是詢問一下小明的意見,結果他爸比和爺爺對我說的話做出的反應影響到了小明接下來的行為。
這次之后,我和小明私下約定好。以后去找他玩的,都會去他房間里講話,避免他家人聽到。
這就叫事件阻止行為,只有天知地知你知我知,避免其他人造成不必要的影響。
廢話說了那么多,不知道大家明白了沒有。直接上代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>點擊事件冒泡處理</title> <script type="text/javascript"> var fun1 = function (e) { alert("我是父點擊事件"); } var fun2 = function (e) { e.stopPropagation();//阻止點擊事件向上冒泡 alert("我是子點擊事件"); } </script> </head> <body> <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red"> 父節點 <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px"> 子節點 </div> </div> </body> </html>
子節點的點擊事件會上父一級傳遞的,就像上述代碼中說表明的,在點擊事件觸發fun2的時候,接下來也會觸發fun1。在大部分的邏輯中,我們不是很希望這樣。在就需要在點擊子節點的時候,中止父節點接下來的行為。
再補充一點比較特殊的點擊事件:
如果要取消某些DOM元素單擊后的缺省處理函數,比如轉到其它頁面或是提交表單,為了取消這些缺省實際處理,可以調用e.preventDefault()。
備注:這里只是對一般情況的點擊事件冒泡做了說明。