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

在此先感謝您的幫助!

回答

0

問題似乎是IE < 11不會在空的<div>上觸發事件。添加透明<img>到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"> 
      <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>