Test the version of the browser:
IETester 6, 7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0
Let's take a look at the coordinate properties of each major browser and what they mean.
In IE
Event.offsetx
Event.offsety
Relative to e.srcelement coordinates
Sets or gets the x-coordinate of the mouse pointer's position relative to the object that triggered the event.
Sets or gets the y-coordinate of the mouse pointer's position relative to the object that triggered the event.
Event.clientx
Event.clienty
Always relative to the viewport
Sets or gets the x-coordinate of the mouse pointer's position relative to the window's customer area, where the customer area does not include controls and scrollbars for the window itself.
Sets or gets the y-coordinate of the mouse pointer's position relative to the window's customer area, where the customer area does not include controls and scrollbars for the window itself.
Event.x
Event.y
Although the manual says it is relative to the document, but in the IE6/7, they both have the same value as Clientx,clienty.
But this is not a serious problem, because the viewport relative to the coordinates plus the scroll bar has been rolled to the height, still can get the real x (y), this problem in the IE8 standard mode is resolved
Sets or gets the X-pixel coordinates of the mouse pointer's position relative to the parent document.
Sets or gets the Y-pixel coordinate of the mouse pointer's position relative to the parent document.
Event.screenx
Event.screeny
Sets or gets the x-coordinate that gets the position of the mouse pointer relative to the user's screen.
Sets or gets the y-coordinate of the mouse pointer's position relative to the user's screen.
In Firefox
Event.layerx
Event.layery
Relative to e.srcelement coordinates
Sets or gets the x-coordinate of the mouse pointer's position relative to the object that triggered the event.
Sets or gets the y-coordinate of the mouse pointer's position relative to the object that triggered the event.
Event.clientx
Event.clienty
Always relative to the viewport
Sets or gets the x-coordinate of the mouse pointer's position relative to the window's customer area, where the customer area does not include controls and scrollbars for the window itself.
Sets or gets the y-coordinate of the mouse pointer's position relative to the window's customer area, where the customer area does not include controls and scrollbars for the window itself.
Event.pagex
Event.pagey
Sets or gets the X-pixel coordinates of the mouse pointer's position relative to the parent document.
Sets or gets the Y-pixel coordinate of the mouse pointer's position relative to the parent document.
Event.screenx
Event.screeny
Sets or gets the x-coordinate that gets the position of the mouse pointer relative to the user's screen.
Sets or gets the y-coordinate of the mouse pointer's position relative to the user's screen.
In fact, IE and Firefox have all the attributes, and other browsers combine these attributes, but the meaning is exactly the same.
Chrome and Safari
Both the chrome and Safari are grey and comprehensive, and they include all the coordinates, including
Event.offsetx
Event.offsety
Event.layerx
Event.layery
Event.clientx
Event.clienty
Event.x
Event.y
Event.pagex
Event.pagey
Note: Chrome and Safari's event.x Event.y are consistent with IE6 7, and they are equal to Event.clientx,event.clienty
Opera firmly walked the road of IE6 7, which possessed
Event.offsetx
Event.offsety
Event.clientx
Event.clienty
Event.x
Event.y
Almost exactly the same as IE, but luckily it has pagex,pagey.
Event.pagex
Event.pagey
Note: Chrome and Safari, as well as Opera's event.x event.y, are consistent with the IE6 7, which are equal to Event.clientx,event.clienty,
In IE8, Event.x,event.y is equivalent to the event.pagex,event.pagey of other browsers
Why do rice Layerx and offsetx, X, and Pagex be repeated in some browsers?
Because the consortium does not standardize these attributes, the MouseEvent section of the DOM3 draft uses the DOM2 definition, with only two pairs of attributes
ClientX of type Long, readonly
The horizontal coordinate at which, the event occurred relative to the viewport with the event.
ClientY of type Long, readonly
The vertical coordinate at which of the event occurred relative to the viewport with the event
ScreenX of type Long, readonly
The horizontal coordinate at which, the event occurred relative to the origin of the "screen coordinate system."
ScreenY of type Long, readonly
The vertical coordinate at which, the event occurred relative to the origin of the "screen coordinate system."
This is the next Cup, so support standard browsers are all wood has a direction, but it, the browser manufacturers on the other side, the offsetxy can not get a moth, certainly from the Layerxy,
Pagexy and XY choose one, so in order to meet the standard, the two pairs of properties are put into the browser.
In any case, the problem is always solved. See the compatibility Report above, the prototype of the code is done
Let's start writing!
Geteventcoord
Copy Code code as follows:
1 var geteventcoord = function (e)
2 {
3 var evt = e| | Event
4 var html = document.documentelement; scroll bar on <HTML>
5 Return {
6
7//If the Pagex property is true, use Pagex, otherwise use ClientX + html.scrollleft
8 PageX:evt.pageX | | Evt.clientx + Html.scrollleft,
9
10//If the Pagey property is true, use Pagey, otherwise use ClientY + html.scrolltop
One PageY:evt.pageY | | Evt.clienty + Html.scrolltop,
12
//clientx Y Everyone is unanimous, the wood has suspense
ClientX:evt.clientX,
ClientY:evt.clientY,
16
17//If the Layerx property is true, use Layerx, otherwise use OffsetX
LayerX:evt.layerX | | Evt.offsetx,
19
20//If the Layery property is true, use layery, otherwise use OffsetY
LayerY:evt.layerY | | Evt.offsety
22}
23}
Use the following
Copy Code code as follows:
Document.onmousemove = function (e)
{
var coord = Geteventcoord (e);
Document.title = [Coord.pagex,coord.pagey];
}
Seems to have been gray OK, seems to have been able to meet the day-to-day work needs, but there are several problems
1. Not rigorous
Use Evt.pagex | | Evt.clientx + html.scrollleft This judgment,
As long as Evt.pagex equals Undefined,null,nan, ' and 0,false these values, the left expression evaluates to False, thus calculating the right expression and returning the value of the expression.
And Evt.pagex itself is given the chance to return 0. So the judgment should read
typeof Evt.pagex = = ' number '? Evt.pageX:evt.clientX + html.scrollleft
We use it when Pagex is a number.
2. Unable to work in weird mode
What is a weird pattern?
In order to be compatible with previous versions of IE56, IE introduced two rendering modes in IE6: Weird mode (quicks mode) and standard mode (standards mode)
The difference between the two modes is mainly focused on the CSS box model interpretation, and in the BOM. Is that the dependent object of the scroll bar has changed
In weird mode, the scroll bar is body, and if you want to get the height and width of the page's scrolling volume, you need to use the Document.body.scrollTop
In standard mode, you need to use Document.documentElement.scrollTop
The switching mode of the two modes is mainly determined by DOCTYPE, see: http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/
Starting with IE6, IE uses a property document.compatmode to detect whether a document has switched to a weird mode or a standard mode.
If the value of the Document.compatmode
For Backcompat: It's in the quirks mode.
For Css1compat: in standard mode
So in order to work properly in two modes,
We need to decide which mode Document.compatmode is.
And the way to judge is very simple, just to determine whether the first letter of the value of Compatmode is B, you can choose ScrollTop dependent objects
That's the way to judge.
Document.compatMode.indexOf (' B ') ==0
You can also use regular writing
/^b/i.test (Document.compatmode)
The second one looks more x. Well, just use the second one (actually the first performance is better)
Now, let's write the second edition.
Code
Copy Code code as follows:
var Geteventcoord = function (e)
{
var evt = e| | event, d = document,
Scrollel =/^b/i.test (d.compatmode)? D.body:d.documentelement,
Supportpage = typeof Evt.pagex = = ' Number ',
Supportlayer = typeof Evt.layerx = = ' Number '
return {
Pagex:supportpage? Evt.pageX:evt.clientX + Scrollel.scrollleft,
Pagey:supportpage? Evt.pageY:evt.clientY + Scrollel.scrolltop,
ClientX:evt.clientX,
ClientY:evt.clientY,
Layerx:supportlayer? Evt.layerX:evt.offsetX,
Layery:supportlayer? Evt.layerY:evt.offsetY
}
}
Thump thump, this is done, this function is capable of what mile, the first thought is drag, let us write a small drag function to verify the next
Code
Copy Code code as follows:
function Dragme (o)
{
var supportcapt =!! O.setcapture;
O.onmousedown = function (e)
{
var coord = Geteventcoord (e), x = Coord.layerx, y = coord.layery;
if (SUPPORTCAPT) o.setcapture ();
Document.onmousemove = function (e)
{
var coord = Geteventcoord (e);
O.style.left = coord.pagex-x + ' px ';
O.style.top = coord.pagey-y + ' px ';
}
Document.onmouseup = function ()
{
This.onmousemove = This.onmouseup = null;
if (SUPPORTCAPT) o.releasecapture ();
}
}
}
Dragme (document.getElementById (' block '));
Example
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & lt;title> Event </title> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <style> body {font-size:12px} #block {-moz-user-select:none; width:100px; height:100px; Background:gray; Color:white; line-height:100px; Text-align:center; }. Move {cursor:move; {</style> </pead> <body> <div onselectstart= ' return false ' id= ' block ' > Drag Me </div> & Lt;div id= "Info" ></div> </body> <script> function Test (obj) {var contents = [], count = 0; For (var item in obj) {count++; Contents.push (item + ' = {' + typeof obj[Item] + '} ' + Obj[item] + ')} contents.sort (function (a,b) {if (a) ; b) return 1; if (a < b) return-1; return 0; }) Contents.push (' altogether ', Count, ' member '); return contents; The var Geteventcoord = function (E) {var evt = e| | event, D = document, Scrollel =/^b/i.test (d.compatmode)? D.body:d.documentelement, supportpage = typeof Evt.pagex = = ' Number ', Supportlayer = typeof Evt.layerx = ' number ' re Turn {pagex:supportpage Evt.pageX:evt.clientX + scrollel.scrollleft, pagey:supportpage? evt.pageY:evt.client Y + scrollel.scrolltop, ClientX:evt.clientX, ClientY:evt.clientY, Layerx:supportlayer? Evt.layerX:evt.offsetX, Layery:supportlayer? Evt.layerY:evt.offsetY}} function Dragme (o) {var supportcapt =!! O.setcapture; O.onmousedown = function (e) {var coord = Geteventcoord (e), x = Coord.layerx, y = coord.layery,d = document; if (SUPPORTCAPT) o.setcapture (); D.body.classname = ' move '; info.innerhtml = Test (e| | event). Join ('); D.onmousemove = function (e) {var coord = Geteventcoord (e); O.style.left = coord.pagex-x + ' px '; O.style.top = coord.pagey-y + ' px '; } d.onmouseup = function () {this.body.className = This.onmousemove =This.onmouseup = null; if (SUPPORTCAPT) o.releasecapture (); }} var info = document.getElementById (' info '), block = document.getElementById (' blocks '); DRAGME (block); </script> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
