Max*_*Art 5 javascript internet-explorer dom
Internet Explorer 在过去3年中有了很大的改进,因为IE 10已经成为一款性能相当不错的浏览器.但是,即使有了这些改进,Web开发人员仍然必须:
document.evaluate
,或者oninput
在删除或contentEditable
元素上没有触发的事件.我问自己这些解决方法的"可接受"限制是什么.例如,IE <9 change
事件不会冒泡:但由于它支持focusin
和focusout
泡泡,它可以通过几个事件监听器来修复.
众所周知,IE <9不能正确处理元素innerHTML
上的属性<select>
,因此我们可以重新定义属性(仅限IE8):
(function() {
var re = /^<SELECT(?: [\w:]+=(?:\S+|'[^']*'|"[^"]*"))*>/,
div = document.createElement("div");
Object.defineProperty(HTMLSelectElement.prototype, "innerHTML", {get: function() {
var out = this.outerHTML, m = out.match(re);
return m ? out.slice(m[0].length, -9) : "";
}, set: function(v) {
this.innerText = "";
if (v = String(v)) {
div.innerHTML = "<select>" + v + "</select>";
var s = div.firstChild;
while (s.firstChild) this.appendChild(s.firstChild);
}
}});
})();
Run Code Online (Sandbox Code Playgroud)
但IE - 甚至IE11!- 仍然不允许动态设置元素的value
属性<select>
,所以(IE8-11):
Object.defineProperty(HTMLSelectElement.prototype, "value", {get: function() {
var opt = this.selectedIndex >= 0 ? this.options[this.selectedIndex] : null;
return opt ? opt.value : "";
}, set: function(val) {
val = String(val);
var ops = this.options, i = ops.length;
while (i--) if (ops[i].value === val) break;
this.selectedIndex = i;
}});
Run Code Online (Sandbox Code Playgroud)
这些工作做得很好,可能有点慢,但只是在一个resticted情况下:HTMLSelectElement
s.而且它们很少能代表性能问题.
但是因为我正在改变一些基本的DOM属性,所以我想知道是否会出现任何我没有看到的问题.有没有人有想法?
归档时间: |
|
查看次数: |
159 次 |
最近记录: |