Home > Developer > JavaScript
To show the mouse's location relative to the browser (as opposed to the screen and the page), we were able to take advantage of the Click event to get an event object about the mouse click. The Clientx and Clienty in this event object include the position information of the mouse, so I have a whim. Then I'm not able to create a tag element from the DOM createelement to display the current mouse relative to the browser's coordinates at the corresponding mouse position?
Here I first use the createelement () method in element to create a div tag. In order for the label information to appear in the corresponding position of the mouse, the Div.style will be used to the corresponding top. The Left property value is assigned to CLIENTX and Clienty so that the new DIV tag layer can be displayed in the corresponding position of the mouse.
A text node is then created within the tag using createTextNode ().
The text node is the space axis and the spatial ordinate of the mouse relative to the browser.
The text node is then added to the div tag via the AppendChild method, and the div tag is appendchild into the body. This way the entire information block used to display the mouse coordinates at the mouse position is done. Finally, using the event handler in DOM0, Div.onclick=function {}, to monitor the mouse click event to display the corresponding coordinate values relative to the browser within the event. Detailed Program code:
<!doctype>
<body>
<script type= "Text/javascript" >
var mydoc=document;
var div=document.createelement ("div");
div.style.position= "Absolute";
Div.style.border= "1px solid black";
Mydoc.onclick=function (event) {
if (div.childNodes.length) {
Div.removechild (Div.firstchild);
}
event=event | | window.event;
Div.style.left=event.clientx;
Div.style.top=event.clienty;
Div.appendchild (document.createTextNode ("+event.clientx+" px "+"; " +event.clienty+ "px" + ")");
}
Document.body.appendChild (DIV);
</script>
</body>
The last note here is that each mouse click adds a text node to the DIV so that when you click it more than once. The displayed content includes the previous coordinate values. So here each time you click Play. Assuming that you click the mouse again, you will use Div.childNodes.length to infer. This removes the newly started text node. This ensures that all text content within the DIV tag is the latest mouse coordinates.
Dom implementations in JavaScript show the spatial location of the mouse
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
