Question

我的问题类似于Opening JQuery Ui Dialog in MousePosition，但不同之处在于我希望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 website，第一个脚本应该有效。

跟踪鼠标移动时，通常需要知道实际情况鼠标指针的位置。传递给的事件对象 handler包含有关鼠标坐标的一些信息。可以使用.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，并且还使用了some test code，其行为符合预期。为什么上面会在我的脚本中产生差异？是与我的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/。

Answer 1

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

Answer 2

虽然不是问题的原因，但是有多个元素具有相同的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>

问题是jQuery UI对话框中的position选项需要

一个数组，包含x，y坐标对，偏离左边，视口的上角（例如[350,100]）

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

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

2 个答案: