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。
在此先感謝您的幫助!