onpropertychange与jQuery同时使用时在IE78产生的BUG

最新推荐文章于 2017-11-14 20:29:00 发布

钟小楼

最新推荐文章于 2017-11-14 20:29:00 发布

阅读量797

点赞数 1

出处：http://www.cnblogs.com/gada/articles/4048836.html

今天用oninput和onpropertychange写了一个suggest，实现的自动填充功能，如下：

正常浏览器没有什么问题，那问题就来了，学挖掘机技术哪家强？阿不。。那个浏览器有问题呢？

答：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