1
我没有那么复杂的<div>结构，它打破了IE < 11（Chrome和Firefox等其他主流浏览器正在工作）中的事件处理程序。IE 9,10：div结构和事件
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller"></div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea"></div>
</div>
</div>
这些都是注册的事件处理：
$(function() {
var stopPropagation = function (e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
$('#controller').on('mousedown', function (e) {
console.log('controller mousedown');
});
$('#controls').on('mousewheel', function (e) {
console.log('controls mousewheel');
stopPropagation(e);
return false;
});
$('#thumbnailer').on('click', function (e) {
console.log('thumbnailer clicked');
});
$('#viewArea').on('click', function (e) {
console.log('viewarea click');
stopPropagation(e);
return false;
});
$('#viewArea').on('mousedown', function (e) {
console.log('viewarea mousedown');
stopPropagation(e);
return false;
});
$('#slider').on('change', function (e) {
console.log('slider change');
stopPropagation(e);
return false;
});
});
的主要问题似乎是CSS定位和尺寸：
#layer {
position: absolute;
top: -175.813008130081px;
left: -578.615px;
width: 1421px;
height: 875px;
}
#layer1, #layer1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#thumbnailer {
background-color: rgba(150, 150, 150, 0.7);
border: 1px solid rgb(150, 150, 150);
position: absolute;
bottom: 15px;
right: 10px;
width: 200px;
height: 123px;
}
#thumbnailer img {
width: 100%;
height: 100%;
}
#viewArea {
position: absolute;
top: 25px;
left: 81px;
border: 1px solid #f00;
width: 56%;
height: 56%;
}
#controller {
width: 100%;
height: 100%;
}
#slider {
position: absolute;
bottom: 10px;
left: 200px;
}
在IE < 11，任意点击或的mousedown上viewArea仍然没有处理;相反，发生在thumbnailer上的事件。类似地，controls上的mousewheel事件和controller上的鼠标事件不会得到处理。不过，当光标位于slider元素上时，mousewheel事件get会被触发。
这种奇怪的行为似乎根植于2张图片的大小。但是，我的应用程序需要在相对较小的容器中显示更大的图像（因此设置为overflow: hidden）。
我为此创建了一个fiddle。
在此先感谢您的帮助！