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