Re: [心得]jQuery blur事件擴充

看板Ajax作者contagious (漂移胖)時間17年前 (2008/09/19 05:46)推噓0(0推 0噓 8→)

留言8則, 2人參與討論串2/2 (看更多)

其實我完全沒有這個需求...不過無聊就練習一下： // 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