Question

HTML：

<h1>Instructions</h1>
<ol>
    <li>Click on Resize Button</li>
    <li>Observe no resize event is raised</li>
    <li>Click on Check Height button</li>
    <li>Observe height has changed</li>
</ol>
<button id="button">Resize</button>
<button id="button2">Check Height</button>
<br/>
<div id="map" style="position:fixed;width:600px;height:0px;border:1px solid black;">
    <div id="root" style="position:absolute;left:0px;right:0px;top:0px;bottom:0px;border:1px solid red"/>
</div>

使用Javascript：

var button = document.getElementById('button');
button.addEventListener('click', process);

var root = document.getElementById('root');
root.addEventListener('resize', resize);

var console = document.getElementById('console');
var map = document.getElementById('map');

var button2 = document.getElementById('button2');
button2.addEventListener('click', function () {
    log(root.offsetHeight);
});
log('ready to log');

function process() {
    map.style.height = '400px';
}

function resize() {
    var w = root.offsetWidth;
    var h = root.offsetHeight;
    log('resize event raised, dimensions are ' + w + " x " + h);
}

function log(text) {
    console.appendChild(document.createTextNode(text));
    console.appendChild(document.createElement('br'));
}

调整resize时，Chrome不会引发div事件。 这是一个错误，还是可以？在IE和FF中，e.onresize会返回undefined，但在Chrome e.onresize中会返回null其中e 1}}是HTML div。 Chrome调试程序中的intellisense检测到onresize上的e属性。应该在Chrome中返回undefined吗？ IE和FF支持resize但仅支持window对象。我无法找到适当的文档来解释何时应该引发resize以及非window对象是否应该支持Chrome。

Answer 1

来自W3C规范：

用户代理必须在调整文档视图大小时调度此事件。

http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize

调整窗口大小时会触发resize事件，而不是您选择的任何元素。

Chrome不会提升调整大小事件

1 个答案: