Re: [問題] jquery子元素繼承問題
※ 引述《etman395 (技術時代)》之銘言：
: 或許我不該擅自決定那樣的事件補獲叫做繼承吧
: 就書上所講事件往子元素傳遞那樣叫事件補獲
: 而你說的情形是事件冒泡
: 必須要子元素和父元素都綁定同樣的事才會觸發
: 就是子元素li click之後連帶父元素的ul click事件也觸發
我一開始就想回 ,
只是你的問題我看不太出來你想要做什麼所以就擱著了.
其實這個事件真的沒有這麼複雜 ,
不需要特地區分為向下的捕獲或向上的 bubble ,
這只是混淆自己認知而已...
總的來說 , 這其實都只有向上的傳遞 , 也就是所謂 bubble 效果 .
只是 , bubble 的主角是誰的問題 , 這會牽扯到為什麼你要怎麼解決.
讓我們先把層級拉出來
(sorry , 我現在比較懶得寫完整的html code ,
底下是示意有看不懂的要說 ,
我先假設讀者有基本html / jQuery event能力....)
先假設是這樣
body{
div{
ul{
li{
}
}
}
}
假設是這樣的層級好了 .
今天的 bubble 的意思是說 , 我今天從哪個元素觸發( trigger ) ,
它會一路往上觸發他的對應元素的父元件對應的事件 .
所以以你的命題 ul 來說 , 假設他定義了
click(function(){
alert("hi i am ul ");
});
這時候如果你去點擊(click) ul , 這時候他理所當然會跑出 hi i am ul ,
那你的問題就是你現在點的明明就是 li , 為什麼也會出現 "hi i am ul" .
這很簡單啊 , 因為 li.click -> ul.click -> div.click -> body.click
這就是起點由li 開始的bubble 現象...
我們說 ul.click(function(e){
e.stopPropagation(); //直接複製的,平常都直接寫false...
e.preventDefault();
//or return false;
});
這是說 他的流程會從 li.click -> ul.click -\->
因為被阻止了 , 他的訊息不會再往上傳.
但是這對 li.click 上來想阻止他傳給ul.click 的事件是無效 ,
因為根本就沒擋對...... XD .
所以你的問題在於說 ,
你只有某特定元素(ex. ul)被點擊的時候 , 你才想執行 ,
而且你認為只有 trigger 對象直接是指到該元素 ,
而不是該元素的子元素(ex. li)時才進行事件的處理.
所謂event.target 指的是真正被點到的那個直接元素 ,
如果是 li被 click , event.target 就是 li ,
if( li == this ){
// this是看event是由誰bind 就是誰 , 在這例子是ul
//所以等同於 if(li==ul){}
//do the thing you want
}
所以在這樣的狀況下 , 當然只有 ul 被click 有效 .
其實嚴格來說還有另一個後遺症會比較多的解法 .
$("ul *").click(function(){
return false;
});
(竊笑)
至於為什麼這樣能解按照上面的邏輯應該是想的出來，
所謂的後遺症就是 <a> 這類靠click的事件完全都會被擋掉.
--
哦附帶一題 , <a> 的轉換網址事件是排在onclick之後的 ,
轉換網址這個行為 , 其實也是 bubble 的效果.
--
I am a person, and I am always thinking .
Thinking in love , Thinking in life ,
Thinking in why , Thinking in worth.
I can't believe any of what ,
I am just thinking then thinking ,
but worst of all , most of mine is thinking not actioning...
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.136.156.164
※ 編輯: TonyQ 來自: 220.136.156.164 (12/06 15:50)
※ 編輯: TonyQ 來自: 220.136.156.164 (12/06 15:52)
→
12/06 15:57, , 1F
12/06 15:57, 1F
推
12/06 20:05, , 2F
12/06 20:05, 2F
→
12/06 20:06, , 3F
12/06 20:06, 3F
推
12/06 20:41, , 4F
12/06 20:41, 4F
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 7 之 7 篇)：