作者adahsu (路邊的垃圾筒)
看板Ajax
標題Re: [問題] jquery子元素繼承問題
時間Sun Dec 6 13:08:07 2009
※ 引述《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: 220.130.11.7