Is my understanding of document and viewport with regards to mouse position in javascript correct?_问答_开发者

Is my understanding of document and viewport with regards to mouse position in javascript correct?

开发者 https://www.devze.com 2023-03-29 11:59 出处：网络

Based on answers from a previous question, both refer to mouse positions (x and y coordinates). relative to the document and

Based on answers from a previous question, both refer to mouse positions (x and y coordinates).

relative to the document and
relative to the viewport.

开发者_如何学CI have read through an article on QuirksMode, however I think I may be missing something. I have put together these two diagrams to help me in my understanding. Is my analysis correct?

Is my understanding of document and viewport with regards to mouse position in javascript correct?

Now scroll the document 250px...

Is my understanding of document and viewport with regards to mouse position in javascript correct?

Your analysis is correct (and those are very nice diagrams!)

However regarding your other post, they're a bit more information than is necessary.

You just need to understand that there is a document and viewport. The document is stationary and the viewport moves with you (and has a scroll offset).

In principle, you could place your dialog window relative to either of these. Let's pretend the dialog is a simple division element:

<body>
<button id="save">Save</button>
<div id="dialog" style="position:absolute;">Are you sure?</div>
</body>

And let's say you want to position that element relative to your button when clicked. You could use the document:

<script>
document.getElementById("save").onclick = function(e) {
  var dialog = document.getElementById("dialog");

  dialog.style.top = e.pageY + "px";
  /*
  pageY gives the position of the mouse relative to the
  document, when this event occurred.
  */
};
</script>

Or you could use the viewport:

<script>
document.getElementById("save").onclick = function(e) {
  var dialog = document.getElementById("dialog");

  dialog.style.top = e.clientY + window.pageYOffset + "px";
  /*
  clientY gives the position of the mouse relative to
  the viewport, when this event occurred. And pageYOffset
  is the distance the user has scrolled.
  */
};
</script>

You could even use the button itself. This has the added benefit of giving you a consistent position, regardless of where exactly the user clicked:

<script>
document.getElementById("save").onclick = function(e) {
  var dialog = document.getElementById("dialog");

  dialog.style.top = document.getElementById("save").offsetTop + "px";
  /*
  offsetTop gives the position of the button, relative to its nearest
  positioned ancestor. If the element is deeply nested, you may need
  to do additional calculations. (jQuery's "offset" method will do this
  for you).
  */
};
</script>

To apply that last method when you're using jQuery's dialog class, you can simply do this:

<script>
  $("#save").click(function(e) {
    $("#dialog").dialog({
      position: {
        my: "top",
        at: "bottom",
        of: $("#save")
      }
      /*
      See this: http://docs.jquery.com/UI/API/1.8/Position
      */
    });
  });
</script>