Question

我有一个不那么复杂的<div>结构，它在IE中打破了事件处理程序＆lt; 11（Chrome和Firefox等其他主流浏览器正在运行）。

<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＆lt; 11，viewArea上的任何点击或丢失仍然未得到处理;相反，thumbnailer上的事件被触发。类似地，controls上的mousewheel事件和controller上的mousedown都没有得到处理。但是，当光标位于slider元素上时，鼠标轮事件被触发。

这种奇怪的行为似乎植根于2幅图像的大小。但是，我的应用程序需要在相对较小的容器中显示更大的图像（因此overflow: hidden设置）。

我为此创建了fiddle。

提前感谢您的帮助！

Answer 1

问题似乎是IE＆lt; 11不会触发空<div>上的事件。在div中添加透明<img>可以解决问题：

<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">
           <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
        </div>
        <input id="slider" type="range" />
    </div>
    <div id="thumbnailer">
        <img src="http://sopos.org/olli/blindbild-thumb.png" />
        <div id="viewArea">
           <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
        </div>
    </div>
</div>

IE 9,10：div结构和事件

1 个答案: