javascript - Can't call the window position object in a function

Question

I have the following function that works like a champ:

//To find the position of an element
    function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

so when I call the getPosition I get the numbers as an object like that:

>{x: 200, y: 500}

Now I have another function that I am building to trigger an event with a certain position, but I can't call the getPosition number right... I have tried dozens of variations, certainly I am missing something here. Below is a simple function to show the way I am calling the position number is not correct:

function test () {
  console.log(getPosition(img));//An image - getPosition identify it to be at {x:200,y:500}
  if (getPosition(img) == (200,500)){ 
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

I have also tried between other options this:

function test () {
  console.log(getPosition(img));
  var x = 200;
  var y = 500;
  if (getPosition(img) == {x,y}){ 
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

and this:

function test () {
  console.log(getPosition(img));
  if (getPosition(img) == {x: 200,y: 500}){ 
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

So I only get 'it is not there!', I have tried many different ways to find a way to compare without success.

Any idea what I am doing wrong?

Much appreciated.

标签： javascriptobjectposition

Answer 1

该getPosition()函数返回一个对象。因此，您必须检查对象x和y属性以确保它们符合您的要求。

最简单的方法是在if语句中分别检查 x 和 y。这似乎是您想要做的，但您只是尝试在 1 个语句中检查 x 和 y 属性，从而使语法有点偏离。

//To find the position of an element
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

test()

function test() {
  var img = document.getElementById("the-image");
  
  console.log(getPosition(img));
  
  var imageLocation = getPosition(img);
  
  if (imageLocation.x === 8 && imageLocation.y === 22) {
    console.log('It is there!')
  } else {
    console.log('it is not there!')
  }
};

<img id="the-image" src=""/>