2

问题在于以下代码，我无法弄清楚为什么？代码是这样的

.ASPX

 <cc1:TabPanel runat="server" HeaderText="Floor Plan" ID="TabPanelFloorPlan">
        <ContentTemplate>
                        <div id="floorplanContainer">
                        <img id='fplan' src="~/_layouts/card.jpg" usemap="#MyImageMap" />
                        </div>
                        <map id="MyImageMap" name="MyImageMap">
                            <area id='roomArea' shape="poly" coords="0,0,0,0" alt="Meeting Room" />
                        </map>
                        <input id="Submit" type="button" value="Draw" />
                        <input id="clear" type="button" value="Clear" />
        </ContentTemplate>
    </cc1:TabPanel>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
   
<script src="../../Style Library/Styles/jquery.maphilight.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function () {
            var points = "";

            $("#floorplanContainer").click(function (e) {
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;

                var pwidth = 2;
                var pheight = 2;

                $("#floorplanContainer").append("<div class='point' style='font-size:0;position:absolute; display:inline; border: 1px solid black; top:" + (y - (pheight / 2)) + "px; left:" + (x - (pwidth / 2)) + "px; width: " + pwidth + "px; height: " + pheight + "px; z-index:100; '> </div>");
                if (points != "") points += ',';
                points += x + "," + y
            });

            $("#clear").click(function () {

                $('.point').remove();
                points = "";
                $('#roomArea').attr('coords', '0,0,0,0');
                $('#fplan').maphilight({ alwaysOn: false });

            });

            $("#Submit").click(function () {

                $('#roomArea').attr('coords', points);
                $('#fplan').maphilight({ alwaysOn: true });

            });
        })
</script>

问题如图所示：点击时在其他位置绘制的点似乎是相对于其他容器的绘制，而不是区域在底部移动。看一看。

在此处输入图像描述

我无法弄清楚为什么会发生这种情况，有人可以帮我解决问题吗？

4

1 回答 1

0

我认为通过使用鼠标事件对象的 jquery clientX 和 clientY 属性，您应该从视口中获取坐标。将图像映射放在容器元素中可能会很有用。

另外两个属性可能会派上用场：鼠标事件对象的 parentX 和 parentY。它们返回从屏幕左上角测量的坐标。

编辑：clientX 和 clientY 可能不是正确的解决方案。但是这个答案似乎有一个解决方案：jQuery get mouse position within an element

于 2012-09-23T09:21:14.217 回答