JavaScript gets mouse coordinates

Source: Internet
Author: User

The event object is used to describe events that occur in a browser window, and an event object is generated as soon as events occur.

Although all event properties can be accessed through the event object, some properties may not be meaningful in some events. such as the Fromelement and Toelement properties are only meaningful when dealing with onmouseover and onmouseout events.

Also, be aware of the differences between the event objects in different browsers. In low-version ie, if a function is called by an event, it can access the event object through Window.event, but other browsers pass the event object to the events handler as an argument to the event handler function. Therefore, to achieve browser compatibility, the event object must be passed to the function with parameters when defining the event trigger.

The implementation of browser-compatible event handling code is as follows:

1 <div id= "mydiv" onclick= "javascript:handleevent (event);" ></div>2 <script type= "Text/javascript" >3     function  handleevent ( EVT) {4         var myevent = window.event? window.event:evt; 5     }; 6 </script>

The code above will determine if the Window.event property exists, and if so, use window.event, or use the parameter evt passed over.

The following instances can get the coordinates of the mouse and are compatible across browsers:

1<body onmousemove= "Javascript:canmove" (event); id= "Bodyid" >2<div id= "mydiv" style= "position:relative; width:1000px; height:700px; " >3 Move Mouse4</div>5 6<script type= "Text/javascript" >7         varx, y;8         varOdiv = document.getElementById (' mydiv '));9         functionCanmove (evt) {Ten             varMyEvent = window.event?window.event:evt; Onex = Document.body.scrollLeft +Myevent.clientx; Ay = Document.body.scrollTop +Myevent.clienty; -Odiv.innertext = ' x= ' + X + ' px; ' + ' y= ' + Y + ' px '; -         } the</script> -</body>

JavaScript gets mouse coordinates

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.