作者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