Question

我有一张带SVG的图像地图。在图像映射上的任何形状的单击事件上，我显示带有一些数据的div元素，然后用户可以关闭这些数据。如果图像高度超过窗口大小并且用户必须向下滚动以查看它，则形状上的单击事件在Internet Explorer上无法预测。根据滚动位置，它可以按照需要运行（即显示带有数据的div元素）或只是向上滚动到顶部。我已经深入了解了Stackoverflow以及Google上的其他任何解决方案。

这是jsfiddle http://jsfiddle.net/awfzcf0d/6/

另外这里是整个html页面 - 使用google cdn上托管的jquery（使用任何文本编辑器另存为html并在IE中打开）

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Image Map Click Event Does Not Fire in IE, when page is scrolled down. Instead the page scrolls to top</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



<body>
<style>

    #floorplanIM         {
        position: relative;
        width: 100%;
        padding-bottom: 77%;
        vertical-align: middle;
        margin: 0;
    }
    #floorplanIM svg {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
    }

    rect{
        fill: #ccc;
        fill-opacity: 0.9;
    }

</style>

<script type="text/javascript">

    $(document).ready(function () {

        $("rect").click(function (e) {
            $('#roominfo').css({display: 'none' });
            $('#roominfo').css({ left: e.pageX, top: e.pageY , position: 'absolute', display:'block' });

        });

        $('#closeme').click(function () { $("#roominfo").hide(); });

    }); //end of $(document).ready

</script>
<p>Click event on rectangular image map (overlayed on boy's right hand) displays a square (div) on first click. 
Click 'Close' to hide the square (div). On scrolling down and clicking again on the image map, it does not fire the click event to show the div; 
It simply scrolls the page up; Works OK in Chrome.</p>
<figure id="floorplanIM">
    <!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 802 620" version="1.1" preserveAspectRatio="xMinYMin meet" xml:space="preserve">
    <image id="img3" width="802" height="620" xlink:href="http://bawandinesh.name/wp-content/uploads/2014/05/Confusion.jpg"></image>
<rect x="-25" y="-25" rx="0" ry="0" width="50" height="50" name="room_1006" transform="translate(555 456.76499939) scale(2.0784313725 2.2080392277)"></rect>

</svg>
</figure>
<div id="roominfo" style="display: none; width: 100px; height:100px; background-color:antiquewhite; color: black; position: absolute; border: solid 1px #111;">

    <div class="delete_link"><a id="closeme" href="javascript:void(0)">Close</a></div>


</div>

</article>
<div style="clear:both"></div>

</body></html>

如何在使用SVG单击图像映射时阻止Internet Explorer向上滚动？

0 个答案: