Home > Developer > Web Develop
1. Mouse position
Visual Area location: ClientX, ClientY (mouse coordinates)
Here we note that now we only know that it is the coordinates of the mouse, but we do not know what the mouse coordinates, now let's look at an example:
--Example 1: Div following the mouse
(1) The OnMouseMove event occurs when the mouse pointer moves.
Note: A MouseMove event occurs whenever the user moves the mouse one pixel. This consumes system resources to handle all these MouseMove events. Therefore, use this event with caution.
#div1 {width:100px; height:100px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">Document.onmousemove=function(EV) {var oevent=ev| | Event varOdiv=document.getelementbyid (' Div1 '); ODiv.style.left =oevent.clientx+ ' px '; odiv.style.top=oevent.clienty+ ' px '; }; </script>Another problem arises here, as shown in the code below;
#div1 {width:100px; height:100px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">Document.onmousemove=function(EV) {varoevent=ev| |event; varOdiv=document.getelementbyid (' Div1 '); ODiv.style.left=oevent.clientx+ ' px '; ODiv.style.top=oevent.clienty+ ' px '; }; </script><body style= "height:2000px;" ><div id= "Div1" ></div></body> When we add a height to the body, we find that the div is out of the mouse, so what is this, and then let's take a look at where the problem appears?
In fact, the clientx is talking about the visual area coordinates, what is the visual area? What is visual area coordinates?
Here comes another scroll distance (scroll bar): ScrollTop property;
-Eliminate the effect of scroll bars
-The meaning of the scroll bar-the distance between the visible area and the top of the page
Document.onclick=function () { //Non-Chrome //alert (document. DocumentElement. scrolltop); Under Chrome no matter how scrolling is 0; //Chrome //alert (document. Body. scrolltop); All can var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop; alert (scrolltop); }; </script> This kind of code will not only deal with the problem of compatibility, but also deal with the problem of the scroll bar;
Then we can use it in the code above to solve the problem above;
<style type= "Text/css" >#div1 {width:100px; height:100px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">Document.onmousemove=function(EV) {varoevent=ev| |event; varOdiv=document.getelementbyid (' Div1 '); var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop; var scrollleft=document.documentelement.scrollleft| | Document.body.scrollLeft; ODiv.style.left=oevent.clientx+scrollleft+ ' px '; ODiv.style.top=oevent.clienty+scrolltop+ ' px '; }; </script> In this case, the DIV will always follow the mouse, but here again there is a problem, is the DIV will flash (because it wants to constantly reposition), then how to deal with this problem? In the back to learn the movement of the piece will be to solve this problem, we can also use fixed positioning, but fixed positioning under IE6 incompatible. In the BOM that lesson has related problems to deal with.
Note: The small experience: the main you use the CLIENTX, you must add scrollleft, as long as the use of clienty, you must add scrolltop. (There will be potential problems if not added.) ）
2, get the absolute position of the mouse on the page
Encapsulation functions
Example 2: A string of div following the mouse
Div {width:10px; height:10px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">window.onload=function () { varAdiv=document.getelementsbytagname (' div '); varI=0; Document.onmousemove=function(EV) {varoevent=ev| |event; Take the mouse coordinatesFor (i=adiv.length-1;i>0;i-- ) { adiv[i].style.left =adiv[i-1].style.left; After a div followed by a Div walk, adiv[i].style.top=adiv[i-1 ].style.top; } adiv[ 0].style.left=oevent.clientx+ ' px '; The first div follows the mouse walk; adiv[0].style.top=oevent.clienty+ ' px '; }; }; </script>second, keyboard eventsOnclick=onmousedown+onmouseup; (mouse click)
Onpress=onkeydown+onkeyup; (keyboard pressed)
1, KeyCode (key code)
<script> Document.onkeydown=function (EV) { var oevent=ev| | event; Alert (oevent. KeyCode); }; </script>
Gets the key that the user presses on the keyboard
--Example: Keyboard control div move
Here we learn a property for preparation: offset
(1) offsetwidth: Is the width of the div +border+padding ;
(2) Offsetheight: is the height of Div +border+padding; //Two does not include the value of margin;
#div1 {width:100px; height:100px; background:red; border:1px solid black ; padding:10px; margin:20px; Position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript "> window.onload =function () { var Odiv=document.getelementbyid (' Div1 ' ); Alert (Odiv.offsetheight ); //pop-up 122, (100+1+1+10+10)
//alert (odiv.offsetwidth); //Eject 122, (100+1+1+10+10)
}; </script>
(3) Offsetleft:
(4) OffsetTop:
#div1 {width:100px; height:100px; background:red; border:1px solid black; padding:10px; margin:20px; Position:absolute; left:100px; top:100px; } </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript "> window.onload =function () { var Odiv=document.getelementbyid (' Div1 ' ); alert (odiv.offsetheight); }; </script>2. Other properties
Ctrlkey, Shiftkey, Altkey
--Example: Submit a message
-Enter Submit
-ctrl+ Enter Submit
May 27, 2016 afternoon (wonderful classroom JS Basics-3 Notes II (event))
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
