作者sk1765 (鼎玉鉉)
看板Ajax
標題(如何獲取event物件)《Re: [ js ] 如何disable上一層的事件》嗎?
時間Sat Aug 14 11:52:37 2010
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)
1F：推 s25g5d4:好...恐怖 高手如雲的AJAX版 08/14 12:54
2F：推 s25g5d4:m文!收拉! (快推不然人家說我們看不懂 08/14 12:56
3F：→ grence:jQuery綁定的事件裡 return false = 取消預設跟停止buble 08/14 14:11
4F：→ grence:然後，如果可以…還是不建議把事件寫在 html裡 08/14 14:12
5F：→ TonyQ:那是 jQuery 的自定義行為。:3 08/14 15:01