0

On any given application, is there a way, maybe in dev tools where I can check the pixel location of my mouse hover?

Kode_12
  • 4,506
  • 11
  • 47
  • 97
  • Possible duplicate of [Is there a way to tell Chrome web debugger to show the current mouse position in page coordinates?](http://stackoverflow.com/questions/12888584/is-there-a-way-to-tell-chrome-web-debugger-to-show-the-current-mouse-position-in) – Tim Troiano May 03 '16 at 14:53

2 Answers2

2

Use javascript to get cursor location.

document.addEventListener("mouseover", function( event ) {   
    console.log(event.screenX, event.screenY);
}, false);
Ashot
  • 1,229
  • 1
  • 12
  • 13
0

Getting the Mouse Click Position :

<!DOCTYPE html>
<html>
  
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
    background-color: #FFF;
    margin: 30px;
    margin-top: 10px;
}
#contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
    background-color: #F2F2F2;
    cursor: pointer;
}
#thing {
    position: relative;
    left: 50px;
    top: 50px;
    transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
 
<body>
<div id="contentContainer">
    <img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
 
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
 
container.addEventListener("click", getClickPosition, false);
 
function getClickPosition(e) {
    var parentPosition = getPosition(e.currentTarget);
    var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
     
    theThing.style.left = xPosition + "px";
    theThing.style.top = yPosition + "px";
}
 
// Helper function to get an element's exact position
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
  };
}
</script>
</body>
</html>

Refer : MouseEvent clientX Property & Getting the Mouse Click Position

Ani Menon
  • 27,209
  • 16
  • 105
  • 126