使用PageY和ClientY鼠标位置的差异结果

Difference results using PageY and ClientY mouse positions

本文关键字：结果 位置 鼠标 PageY ClientY 使用      更新时间：2023-09-26

我的问题类似于在鼠标位置打开JQuery Ui对话框，但不同之处在于我希望JQuery对话框显示非常接近被点击的按钮。我目前的问题是，当我设置position属性时，使用

时，对话框显示在页面底部。
$("button.deleteEmailRow").live("click", function (e) {
    var target = this
    $("#emailAddress").html(this.name); // not imp for my problem
    $("#dialog-email-confirm").dialog({
        autoOpen: false,
        width: 400,
        modal: false,
        resizable: false,
        dialogClass: 'dialogs-only',
        buttons: {
            "Delete Email Recipient": function () {//snip; 
                                     return false;},
            "Cancel": function () {//snip;  
                                     return false;
            }
        }
    });
    $("#dialog-email-confirm")
          .dialog('option', 'position', [e.pageX+30, e.pageY])
          .dialog('open');
});

但是，当使用下列代码时，它会按预期工作。

    $("#dialog-email-confirm")
          .dialog('option', 'position', [e.clientX+30, e.clientY])
          .dialog('open');

根据Jquery网站，第一个脚本应该可以工作。

在跟踪鼠标移动时，通常需要知道实际的鼠标指针的位置。的事件对象处理程序包含一些关于鼠标坐标的信息。可以使用.clientX、.offsetX和.pageX等属性，但是对它们的支持因浏览器而异。幸运的是,jQuery规范.pageX和.pageY属性，以便可以使用它们在所有浏览器中。的X和Y坐标相对于文档左上角的鼠标指针，如如上面的输出示例所示。

我检查了一下，以确保使用以下值是相同的，并发现有一个关于y坐标的差异。

var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
alert(pageCoords + ''n' + clientCoords);

我已经通读了QuirksMode，并且还使用了一些按照预期行为的测试代码。为什么上面在我的脚本中产生不同的结果?它与我的HTML结构有关吗?

编辑(更新后的HTML):

<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css">
    <link href="/Content/960.css" rel="stylesheet" type="text/css">
    <link href="/Content/themes/liberty/jquery-ui.css" rel="stylesheet" type="text/css">
    <link href="/Content/themes/dialogs-only/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css">
    <link href="/Content/sexybuttons.css" rel="stylesheet" type="text/css">
    <link href="/Scripts/messagebar/skins/plain/skin.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="page">
      <div id="header" class="container_12"></div>
      <div id="menuwrapper"></div>
      <div id="content" class="container_12">
        <div id="main" class="grid_12 alpha omega">
          <h2>
            Configuration Settings
          </h2>
          <form action="/Settings/Edit" method="post">
            <fieldset>
              <legend>Settings</legend> // snip
              <div class="editor-label">
                <label for="EmailSuccessList">List of recipients for Successful Notifications</label>
              </div>
              <div class="editor-field">
                <fieldset>
                  <input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="4eedd5a0-076b-4bc6-9a07-7455df9c5d83"><input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="151d8ad0-f204-445c-8778-5207ddbae952"><input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="7b51d4b0-78b6-4ccd-a886-ffef9fe8a00f"><input type="hidden" name="EmailSuccessList.index" autocomplete="off" value="0c7f4c5f-7344-4b47-9202-3ff61ce843fc">
                  <table id="editorEmailSuccessRows" class="editorEmailSuccessRows">
                    <tr class="editorRow">
                      <td class="emailRow">
                        <input class="text-box single-line" id="EmailSuccessList_4eedd5a0-076b-4bc6-9a07-7455df9c5d83_" name="EmailSuccessList[4eedd5a0-076b-4bc6-9a07-7455df9c5d83]" type="text" value="abcs@test.com">
                      </td>
                      <td>
                        <button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="abcs@test.com"><span><span><span class="delete">delete</span></span></span></button>
                      </td>
                    </tr>
                    <tr class="editorRow">
                      <td class="emailRow">
                        <input class="text-box single-line" id="EmailSuccessList_151d8ad0-f204-445c-8778-5207ddbae952_" name="EmailSuccessList[151d8ad0-f204-445c-8778-5207ddbae952]" type="text" value="abcs@test.com">
                      </td>
                      <td>
                        <button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="abcs@test.com"><span><span><span class="delete">delete</span></span></span></button>
                      </td>
                    </tr>
                    <tr class="editorRow">
                      <td class="emailRow">
                        <input class="text-box single-line" id="EmailSuccessList_7b51d4b0-78b6-4ccd-a886-ffef9fe8a00f_" name="EmailSuccessList[7b51d4b0-78b6-4ccd-a886-ffef9fe8a00f]" type="text" value="abcs@test.com">
                      </td>
                      <td>
                        <button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="abcs@test.com"><span><span><span class="delete">delete</span></span></span></button>
                      </td>
                    </tr>
                    <tr class="editorRow">
                      <td class="emailRow">
                        <input class="text-box single-line" id="EmailSuccessList_0c7f4c5f-7344-4b47-9202-3ff61ce843fc_" name="EmailSuccessList[0c7f4c5f-7344-4b47-9202-3ff61ce843fc]" type="text" value="abcs@test.com">
                      </td>
                      <td>
                        <button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow" name="abcs@test.com"><span><span><span class="delete">delete</span></span></span></button>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" align="right" class="lastRow">
                        <a href='/Settings/BlankEmailEditorRow?collectionName=EmailSuccessList' class=" sexysimple sexygreen" id='addNewSuccessEmail'><span class="add">Add new recipient</span></a>
                      </td>
                    </tr>
                  </table>
                </fieldset>
              </div><button type="submit" value="Save Configuration" id="save" name="save"></button> <a href="/Settings" id="cancelEdit">Cancel</a>
              <div class="cancel" style="display: none">
                <div id="dialog-confirm-cancel" title="Cancel Edit?" class="diag">
                  <p>
                    Any changes you have made will not be saved.
                  </p>
                </div>
              </div>
              <div class="demo" style="display: none">
                <div id="dialog-email-confirm" title="Delete Email?" class="dialogs-only">
                  <p>
                    Are you sure you wish to delete this recipient from the list : <span id="emailAddress" style="font-weight: bold;"></span>?
                  </p>
                </div>
              </div>
            </fieldset>
          </form>
          <div id="footer"></div>
        </div>
      </div>
    </div>
  </body>
</html>

使用Google Chrome v14的测试

完整示例请参阅http://jsfiddle.net/SUYA7/

对于pageX/pageY，您使用的是文档/页面的相对位置，但是jQuery对话框需要的是相对于视窗的位置。

虽然不是问题的原因，但有多个元素具有相同的id，这是无效的HTML。以下标记在示例中出现了4次:

<button type="button" href="#" id="deleteEmailRow" class="deleteEmailRow button sexybutton" name="abc.test@com"><span><span><span class="delete">delete</span></span></span></button>
问题是，position选项在jQuery UI对话框需要

一个数组，包含从视口左上角偏移像素的x,y坐标对(例如[350,100])

所以您不能使用<event.pageX, event.pageY>，因为它们提供了鼠标指针相对于文档左上角的X和Y坐标。您需要提供客户端坐标

相关文章：