CODEWITHSUNDEEP
javascripthtmliframe
twiddler
twiddler

Reputation: 598

Problem getting mouse coordinates of user with an iframe that has overlapping elements

I have this code

<!DOCTYPE html>
<html>
<head>
<style>
iframe {
  width: 200px;
  height: 200px;
  
}
/* Playground by EThaiZone */
#parent {
  width: 200px;
  height: 200px;
  border:solid 1px #000;
}
iframe {
  width:100%;
  height:100%;
  border:0px;
}

#parent > button {
  opacity: 0.3;
  position:relative;
  float: right;
  right:10px;
  bottom:35px;
  transition: 0.5s;
}
#parent > button {
  opacity: 1;
}  
</style>
</head>
<body>
<div id="parent">
  <iframe src="get_mouse_info.html"></iframe>
  <button>Test Button</button>
</div>
</body></html>

that contains an iframe loading another page (get_mouse_info.html) and a button that overlaps the iframe. My goal is to log the mouse coordinates of the user as they move their mouse anywhere on the iframe. My problem is that every time the user starts moving their mouse on the overlapping button, the iframe cannot pick up the user's mouse coordinates. This is the code for the mouse tracker

get_mouse_info.html

<!DOCTYPE html>
<html>
<head><style>html, body {height: 100%;margin: 0;}</style></head>
<body onmousemove="myFunction(event)" style = 'background-color:transparent;'>

<script>
function myFunction(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coor = "Coordinates: (" + x + "," + y + ")";
  console.log(coor);
}
</script>

</body>
</html>

Any help is appreciated. Thanks

EDIT: Forgot to mention that I'd like to still be able to click the button afterward. 'pointer-events: none;' (or some similar method) might solve the coordinates problem but wouldn't suit my needs. Thanks

Upvotes: 0

Views: 231

Answers (1)

blex
blex

Reputation: 25659

I don't think you can easily have both of these at the same time:

  • Mousemove events going to the iframe
  • Click events going to the button

Adding pointer-events: none to the button will let every mouse events pass through it. And with or without it, your events will never be at the same time in the parent page and in the iframe. For many security reasons.

If you have control over both pages' code, you could make them communicate with each other. It's a little hacky, but I don't think there is another way. You said you didn't want the parent page to send mouse tracking data to the iframe. But can the iframe tell the parent page that a click happened?

It's what this would do:

parent.html

<style>#parent > button { pointer-events: none; }</style>

<div id="parent">
  <iframe src="get_mouse_info.html"></iframe>
  <button>Test Button</button>
</div>

<script>
  var btn = document.querySelector("button");

  btn.addEventListener("click", function () {
    console.log("Button clicked!");
  });

  // When the iframe tells us a click happened, believe it and autoclick the button
  window.addEventListener("message", function (e) {
    if (e.data === "click") {
      btn.click();
    }
  });
</script>

get_mouse_info.html

<script>
  document.body.addEventListener("mousemove", myFunction);
  function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordinates: (" + x + "," + y + ")";
    console.log(coor);
  }

  // Tell the parent a click happened
  document.body.addEventListener("click", emitClickEvent);
  function emitClickEvent(e) {
    parent.postMessage("click", "*");
  }
</script>

Obviously, this simple example would trigger a click when clicking anywhere inside the iframe (even when we're not over the button). You could also calculate the position of the mouse to check whether it's over it or not, but would this solution even fit your needs?

Upvotes: 1

Related Questions