Geek Answers Handbook

The onmousemove event does not fire from an external source?

I am loading an external webpage (e.g. www.duckduckgo.com in this example) into a div on my webpage. I want my mouse and X position to be inside and outside the div, but when I am inside the div, it seems like the webpage is blocking the onmousemove event from firing. However, the onmouseover event fires only once when a div is entered.

Here is a sample 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 X and Y position of the mouse on this web page (i.e. not just on the top of the div holding the external source)? I tried to add event.preventDefault(); to the beginning of the mouseEvent function, but that didn't help anything.

I assume the external webpage is stealing my focus. This is true? In any case, can I achieve constant updating of the X and Y coordinates?

+7
javascript html mouseevent onmousemove
source share
2 answers

 function mouseEvent(event) { var x = event.clientX; var y = event.clientY; document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y; } function removeCheat() { // remove cheat div or remove right/bottom position. // Not sure what your ultimate goal is. } 
 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%; } #cheat { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } 
 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <div id="cheat" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)" onmousedown="removeCheat()"></div> <form id="form1" runat="server"> <div id="pageDiv"> <label id="label">hello</label> <object id="page" type="text/html" data="https://duckduckgo.com/"> </object> </div> </form> </body> </html>
+3
source share

WHY DOES NOT IT WORK ###

Let me get it right for you ...

since iframes or objects are designed as a simple wormhole from your site to the requested source, they have their own functionality and objects!

There are many tricks you can play to determine the axis of the cursor without being able to interact with the wormhole , but if you want to interact with it, there are other ways ...

HOW TO GET JOB ###

one of them is the good old ajax , using it, you can load the entire site on a div and do even more than you can on the wormholes! since with ajax you split a web page into skeletons, you can not only get your X and Y, you can even personalize the page =)

since this is ajax, you can go crazy and create your own search field and get only the results and links from the desired search engine (since you project) OR , you can just load the entire page on a div or any other element.

if you and XML don't get along as if I don't, JQUERY can lend a hand

+1
source share

More articles:


All Articles