《Re: [ js ] 如何disable上一層的事件》嗎?(꘠…

看板Ajax作者sk1765 (鼎玉鉉)時間15年前 (2010/08/14 11:52)推噓2(2推 0噓 3→)

留言5則, 3人參與討論串1/1

1. return false 是用來停止default action的並不能停止bubbling 正確的停止bubbling的程式碼是 if (event.stopPropagation) event.stopPropagation(); event.cancelBubble=true; 2. 依據第二篇回文所述 → knives:還有我是寫onclick="ajaxget(url,ajaxid")，那裡面還是寫 07/26 16:53 → knives: event.stopPropagation();嗎，還是沒有效果 onclick="ajaxget(url,ajaxid)" 為寫在html中的 Inline event handlers(行內註冊事件處理函式) 事件處理函式的註冊方法共有三種 A.Inline event handlers(行內註冊事件處理函式) : 最古老的將執行段加在html元素的屬性中 B.Tranditional model(傳統模式) : 在分離的javascript中為要引發事件的元件指名處理函式如下片段 <a href="xx.html" id="xx"> var x = document.getElementById('xx'); x.onclick = eventhandler eventhandler為一個function C.Advanced model(進階模式) : 分為W3C和Microsoft兩類 W3C下: x.addEventListener('click',eventhandler,false); Microsoft下: x.attachEvent('onclick',eventhandler); (以上事件註冊模式請參考ppk on javascript 7-c小節) 行內註冊模式的等價傳統模式程式碼為 Lv2.onclick = function () { ajaxget(url,ajaxid); } 在html中屬性onclick = "xxxxxxx" 雙括弧中的內文相當於在傳統模式的事件處理函式中了因此我再嘗試將你的問題重新描述一遍 <div id="Lv1"> <div id="Lv2" onclick="ajaxget(url,ajaxid)"> </div> </div> 也就是我有一段行內註冊的碼但是沒辦法獲取event物件因此不知該怎麼關掉他的bubbling 而錯誤的用了關閉default action的return false; 要解決這個問題必須分成兩段思考第一先把行內註冊翻譯成等價的傳統模式寫好了傳統模式再把他反推回去 <div id="Lv1"> <div id="Lv2" onclick="ajaxget(url,ajaxid)"> </div> </div> 相當於 Lv2.onclick = xx; function xx() { ajaxget(url,ajaxid); } 我要如何在沒有傳參數的event handler中得到event物件呢答案是事實上他有傳在ie中無時無刻的window.event記載著event物件而在W3C中雖然你的處理函式沒有參數但是W3C依舊有傳你可以用arguments[0]獲取event物件在傳統模式只要把程式碼改成 Lv2.onclick = xx; function xx() { var w3cevt=(!!arguments.length)&&arguments[0]; //用arguments.length判斷是否有傳參數有的話arguments[0]就是event物件 var event = w3cevt || window.event ; //如果沒有那麼就是ie的window.event了 ajaxget(url,ajaxid); //再加上停止bubbling的程式片段 if (event.stopPropagation) event.stopPropagation(); event.cancelBubble=true; } 得到等價的傳統模式程式碼後我們再把他回覆成行內註冊模式 <div id="Lv1"> <div id="Lv2" onclick=" var w3cevt=(!!arguments.length)&&arguments[0]; var event = w3cevt || window.event; ajaxget(url,ajaxid); if (event.stopPropagation) event.stopPropagation(); event.cancelBubble=true; "> </div> </div> 以上請問是否有了解 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.59.19.240 ※ 編輯: sk1765 來自: 61.59.19.240 (08/14 11:54)