作者contagious (漂移胖)
看板Ajax
標題Re: [心得]jQuery blur事件擴充
時間Fri Sep 19 05:46:13 2008
其實我完全沒有這個需求...不過無聊就練習一下：
// jquery 1.2.6 引進了的自訂事件的語法
// 我們要 overwrite blur 事件
$.event.special.blur = {
//當事件被註冊的時候，會先呼叫這個 function
//此 function 中的 this 就是被註冊事件的 element
setup: function() {
// 先判斷此 element 是不是本來就可以 bind blur
// 這裡我直接比對 tagName 是不是 input/select 之類的
var tag_name = this.tagName;
if(tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' ||
tag_name =='BUTTON' || tag_name == 'LABEL') {
return false; //回傳 false 表示用預設的行為
}
//因為 js scope 的問題，先把 this 存在另一個變數中
var that = $(this);
// 為此 element 增加一個用來 proxy 事件的 input
if(!this.proxy_input){ //如果已經有這個 proxy input 了...就不用再生一次了
this.proxy_input = $('<input type="text" />'). // 生出來
addClass('proxy_input'). // 加上 class name
insertAfter(this). // 放到原本的 element 後面
focus(function() { that.focus(); }). // proxy focus event
blur( function() { that.blur(); }). // proxy blur event
css({ top: that.offset().top, // 將它的位置設成和原來一樣
left: that.offset().left,
width: that.width(),
height: that.height() });
}
return true;
},
//當事件被取消的時候，會先呼叫這個 function
teardown: function() {
//同樣先判斷是不是原本就可以 bind blur 的 element
var tag_name = this.tagName;
if(tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' ||
tag_name =='BUTTON' || tag_name == 'LABEL') {
return false;
}
// 清掉 proxy input
this.proxy_input.remove();
this.proxy_input = null;
return true;
}
}
這樣 overwrite blur 事件後，就可以直接對 div bind blur 了：
$('div.test').blur(function(){ console.log('blur div.test') });
要特別說明的是，做出來的 proxy_input 會放在原來的 element 的上方，目的是要
讓使用者在 click 原來的 element 時，其實卻 click 到了我們的 proxy_input
為了讓使用者看不到我們的 proxy_input ，要加上特別的 style
input.proxy_input { position: absolute;
filter:alpha(opacity=0);
opacity: 0;
-moz-opacity:0;
}
以上的 code 只在 firefox 中測試過..
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.135.70.236
1F：→ TonyQ:soga , 原來是透明後完全蓋住 , 這倒是沒想到. GJ :p 09/19 09:48
2F：→ TonyQ:不曉得這樣對原本元素的hover/click等事件還會不會存在:p 09/19 09:59
3F：→ TonyQ:這有測試的價值 , 找個時間來測一下... 09/19 09:59
4F：→ contagious:查了一下..其實好像只要加上 tabindex 就可以 focus 了 09/19 12:46
5F：→ contagious:不過初步測試 ff/ie 都可以..但是 safari 不行... 09/19 12:47
7F：→ TonyQ:soga .. 感恩這情報. 09/19 13:33
8F：→ TonyQ:找時間測試一下 , 很感謝你對這問題的不吝分享. :p 09/19 13:35