个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 18:40:10 25 4
gpt4 key购买 nike

我的问题类似于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 ，第一个脚本应该可以工作。

When tracking mouse movement, you usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as .clientX, .offsetX, and .pageX are available, but support for them differs between browsers. Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document, as illustrated in the example output above.

我使用以下方法检查以确保值相同，发现 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/完整样本。

最佳答案

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

关于javascript - 使用 PageY 和 ClientY 鼠标位置的差异结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7089842/

25 4 0
文章推荐： javascript - window.open URL 参数中的可用参数
文章推荐： c - 我的 C 代码中出现段错误的原因是什么？
文章推荐： c# - 在哪里构建一次性依赖项以提高可测试性？
文章推荐： c - 迭代链表，if 语句不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com