onpropertychange與jQuery同時使用時在IE78產生的BUG

 

正常瀏覽器沒有什麼問題，那問題就來了，學挖掘機技術哪家強？阿不。。那個瀏覽器有問題呢？

答：IE7、IE8。如下圖：

當載入頁面的時候(沒有做任何操作)這個默認隱藏的層自動出現了，我什麼事件也沒有觸發啊！爲什麼？

其實原因有2：

1.onpropertychange的特性，這個事件在用戶界面改變或者使用腳本直接修改內容兩種情況下都會觸發。

2.jquery在IE8以下要加這麼一個東西

 

那如何解決呢？

我選擇的時加一個延時定時器，等待JQ添加完屬性後再綁定onpropertychange，當然不一定是最好的，希望大家找到好辦法一起分享。

setTimeout(function(){
  input.attachEvent("onpropertychange", function(){
    callback.call(input);
    console.log("onpropertychange");
  });
}, 100);

 

如上我們可以看出這也不算是什麼BUG，如果JQ不在頁面載入後在input添加屬性一點問題也沒有，onpropertychange恰恰檢測到了添加屬性這一動作，最後造成IE7/IE8上圖所示的BUG。

畢竟onpropertychange和oninput不一樣，我們也沒有辦法吐槽，咳咳。。

而IE9以上卻沒有添加這個屬性，所以沒有觸發這個onpropertychange事件，相安無事。

 

另外多提一下onpropertychange這個事件的坑:

在IE9下：

onpropertychange 事件在用戶輸入、退格（backspace）、刪除（delete）、剪切（ctrl + x）、粘貼（ctrl + v）及鼠標剪切與粘貼時觸發（在 IE9 中只在輸入、粘貼、鼠標粘貼時觸發）（僅 IE 支持）。

backspace、delete 兩個按鍵的 keyCode 分別爲 8、46。

oncut 事件在粘貼（ctrl + v）、鼠標粘貼時觸發。

更詳細請看司徒大大博文：http://www.cnblogs.com/rubylouvre/archive/2013/02/17/2914604.html