I am loading up an external webpage (i.e. www.duckduckgo.com in this example) within a div on my webpage. I want to get my mouse X and Y position while within and outside the div, but when I am inside the div, it seems that the webpage blocks the onmousemove event from firing. However, the onmouseover event fires only once when entering the div.
Here is example code that illustrates my problem:
function mouseEvent(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y;
}html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
#form1 {
height: 100%;
width: 100%;
}
#pageDiv {
height: 100%;
width: 100%;
}
#page {
height: 100%;
width: 100%;
}<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="pageDiv">
<label id="label">hello</label>
<object id="page" type="text/html" data="https://duckduckgo.com/" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)">
</object>
</div>
</form>
</body>
</html>How can I get the mouse X and Y position anywhere on this webpage (i.e. not just on top of the div holding the external source)? I tried adding event.preventDefault(); to the beginning of the mouseEvent function, but that did nothing in the realms of helping.
I am guessing the external webpage is stealing my focus away. Is this the case? Is there anyway I can achieve constant X and Y coordinate updating?
windowinstead. It could be the same-origin policy is preventing events from a tainted object. – Montague$(window).mousemove(mouseMove(event));to the script section of my html document. The problem is still present. – Boylston