作者etman395 (技術時代)
看板Ajax
標題Re: [問題] jquery子元素繼承問題
時間Sun Dec 6 15:09:50 2009
或許我不該擅自決定那樣的事件補獲叫做繼承吧
就書上所講事件往子元素傳遞那樣叫事件補獲
而你說的情形是事件冒泡
必須要子元素和父元素都綁定同樣的事才會觸發
就是子元素li click之後連帶父元素的ul click事件也觸發
在子元素上同樣綁定click事件後 就會發現像你剛那種情形
點li 後 li 和 ul click一樣觸發
所以在你程式裡加這行 就變成事件冒泡
$( '#list1' ).bind( 'click', function(evt) {
alert( 'UL event' );
});
而我說的情形是事件補獲
只是子元素會去觸發父元素所綁定的事件
父元素綁定click 那li click後 就會觸發父元素click
所以彈出視窗當然只會彈出一次
而父元素如果綁定dblclick 那子元素也是點擊二下後觸發父元事的dblclick
所以我指的繼承意思其實是指 子元素會去觸發父元素所綁定的事件
這樣而己
所以當 ul綁定 click li沒綁定click 這就是事件補獲
照你的程式跑 點擊li 後會彈出一次視窗
如果當 ul綁定 click li也同樣綁定click 那就是事件冒泡
點擊li 後會 先彈出 li的click事件 再彈出ul的 click事件
可能是我繼承名詞引起你的誤會吧
還是你覺得哪邊怪怪的= =?
※ 引述《adahsu (路邊的垃圾筒)》之銘言：
: ※ 引述《etman395 (技術時代)》之銘言：
: : 事件向上觸發 才叫冒泡 只有父元素有相同事件就會一直觸發上去
: : bind("click",function(event){
: : event.stopPropagation(); //這是阻止事件冒泡
: : event.preventDefault(); //這是阻止預設行為
: : return false; //可以代替以上簡寫 我試過是有效的 但僅只於阻止冒泡不能阻止補獲
: : }
: : 事件向下觸發 叫做事件補獲 剛好和冒泡相反
: : 而且有點不同 不同的地方在於 子元素會繼承父元素的事件
: : 而事件冒泡是觸發父元素相同的事件
: : 而我那本書裡是提到 jquery不支持事件補獲
: : 必須要用javascript來阻止
: : 看來阻止的方式就是剛解決的這行了
: : if (event.target == this)
: event 是很 nice 的，這其中一定有什麼誤會.... (誤)
: 個人倒是覺得這種情形真的是 事件的繼承 嗎？
: 或者說這個看起來像是 li 繼承 ul 事件處理的情形會不會實際
: 上只是因為 li 不知道這個事件要做啥其實只是把事件往上傳遞
: 給 ul 的錯覺呢？
: 用個例子來看，先在 UL 上綁定一個 click 事件處理程序，
: 內容就很單純的彈出一個訊息視窗：UL event；
: 如果 LI 有繼承到這個事件處理程序，那麼當我們點擊到 LI 元素時，
: 它應該要彈出一次 UL event 視窗，然後事件往上傳遞到 UL 元素，
: 這時又要再彈出一次視窗。相關程式碼如後列，而實際執行起來一直都只有
: 一個 UL Event 的提示視窗，應該足以認定 LI 其實並沒有所謂繼承 UL
: 事件的情形，對否？
: 進一步的話其實還可以探究利用 CSS 將 LI 元素的位置移到別的地方去時，
: 事件處理流程是否會因而改變？ =======> 答案是不會！
: 喔，對了！這確定是原本的疑問嗎？
: <html>
: <head>
: <title>Event</title>
: <script type="text/javascript" src="http://0rz.tw/07U36"></script>
: <script type="text/javascript">
: $( document ).ready(function(){
: $( '#container' ).bind( 'click', function(evt) {
: alert( 'UL event' );
: // 未使用 Firefox+ firebug 或 Chrome 的話，
: // 以下這行要註解掉！
: console.log( evt.target );
: });
: });
: </script>
: <style type="text/css">
: #list3 {
: position: absolute;
: right: 0;
: bottom: 0;
: }
: #list2 {
: margin: 20px;
: }
: </style>
: </head>
: <body>
: <ul id="container">
: <li id="list1">List 1</li>
: <li id="list2">List 2</li>
: <li id="list3">List 3</li>
: </ul>
: </body>
: </html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 123.110.83.12
※ 編輯: etman395 來自: 123.110.83.12 (12/06 15:11)