Home Web Front-end JS Tutorial javascript event object coordinate event description_javascript skills

javascript event object coordinate event description_javascript skills

May 16, 2016 pm 06:25 PM
event object

Test browser versions:

IETester 6,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0


Let’s first take a look at the coordinate attributes of each mainstream browser and their meaning

In IE

event.offsetX
event.offsetY
Coordinates relative to e.srcElement
Sets or gets the x coordinate of the mouse pointer position relative to the object that triggered the event.
Set or get the y coordinate of the mouse pointer 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 position relative to the client area of ​​the window, where the client area is not included The window's own controls and scroll bars.
Set or get the y coordinate of the mouse pointer position relative to the client area of ​​the window, where the client area does not include the window's own controls and scroll bars.


event.x
event.y
Although the manual says it is relative to the document, in ie6/7, their values ​​are consistent with clientX and clientY
But this It is not a serious problem, because the relative coordinates of the viewport and the height of the scroll bar have been rolled out, and the real x(y) can still be obtained. This problem is solved in the standard mode of ie8

Set or get the mouse The x-pixel coordinate of the pointer position relative to the parent document.
Set or get the y pixel coordinate of the mouse pointer position relative to the parent document.

event.screenX
event.screenY
Set or get the x coordinate of the mouse pointer position relative to the user's screen.
Set or get the y coordinate of the mouse pointer position relative to the user's screen.

In FireFox

event.layerX
event.layerY
Coordinates relative to e.srcElement
Sets or gets the x of the mouse pointer position relative to the object that triggered the event coordinate.
Set or get the y coordinate of the mouse pointer 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 position relative to the client area of ​​the window, where the client area does not include the window itself Controls and scroll bars.
Set or get the y coordinate of the mouse pointer position relative to the client area of ​​the window, where the client area does not include the window's own controls and scroll bars.


event.pageX
event.pageY
Sets or gets the x-pixel coordinate of the mouse pointer position relative to the parent document.
Set or get the y pixel coordinate of the mouse pointer position relative to the parent document.


event.screenX
event.screenY
Set or get the x coordinate of the mouse pointer position relative to the user's screen.
Set or get the y coordinate of the mouse pointer position relative to the user's screen.


In fact, IE and Firefox have included all the attributes. Other browsers combine these attributes, but the meaning is exactly the same

Chrome and Safari
Chrome and The two Safari brothers are very thorough. They include all coordinate attributes, 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 The performance of event.x event.y is consistent with IE6 7, they are equal to event.clientX, event.clientY


Opera has firmly followed the path of ie6 7, it has

event.offsetX
event.offsetY

event.clientX
event.clientY

event.x
event.y
Almost exactly the same as ie, luckily It has pageX, pageY
event.pageX
event.pageY

Note: Chrome and Safari, as well as Opera's event. clientX, event.clientY are equal,
And in ie8, event.x, event.y are equal to event.pageX, event.pageY of other browsers


Why is layerX and Will offsetX, x, and pageX appear repeatedly in some browsers?
Because W3C has not standardized these attributes, the MouseEvent part in the DOM3 draft follows the definition of DOM2. There are only two pairs of attributes

clientX of type long, readonly
The horizontal coordinate at which the event occurred relative to the viewport associated with the event.
clientY of type long, readonly
The vertical coordinate at which the event occurred relative to the viewport associated 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 a failure, so the browsers that support the standard have no direction. But, the browser manufacturers second thought, W3C can't figure it out anyway, they must start from offsetXY and layerXY,
Choose one between pageXY and xy, so in order to meet the standard, both pairs of attributes are put into the browser.

No matter what, problems must be solved.After seeing the compatibility report above, the prototype of the code is ready

Let’s start writing!

getEventCoord

Copy code The code is as follows:

1 var getEventCoord = function ( e )
2 {
3 var evt = e||event;
4 var html = document.documentElement; //Scroll bar on
5 return {
6
7 //If the pageX attribute is true, use pageX, otherwise use clientX html.scrollLeft
8 pageX : evt.pageX || evt.clientX html.scrollLeft,
9
10 / /If the pageY attribute is true, use pageY, otherwise use clientY html.scrollTop
11 pageY : evt.pageY || evt.clientY html.scrollTop,
12
13 //clientX Y Everyone agrees , no suspense
14 clientX : evt.clientX,
15 clientY : evt.clientY,
16
17 //If the layerX attribute is true, use layerX, otherwise use offsetX
18 layerX : evt.layerX || evt.offsetX,
19
20 //If the layerY attribute is true, use layerY, otherwise use offsetY
21 layerY : evt.layerY || evt.offsetY
22 }
23 }


Usage is as follows
Copy code Code As follows:

document.onmousemove = function( e )
{
var coord = getEventCoord(e);
document.title = [coord.pageX,coord.pageY] ;
}


It looks pretty good and can meet the needs of daily work, but there are still several problems

1. Not rigorous

Use evt.pageX || evt.clientX html.scrollLeft to judge,
As long as evt.pageX is equal to undefined, null, NaN, '', 0, false these values, the expression on the left will result It is false, thus calculating the expression on the right and returning the value of the expression,
and evt.pageX itself has a chance to return 0. So this judgment should be changed to
typeof evt.pageX == 'number' ? evt.pageX : evt.clientX html.scrollLeft
We only use it when pageX is a number

2. Cannot work in weird mode

What is weird mode?

In order to be compatible with versions before IE56, IE introduced two rendering modes in ie6: Quicks Mode (Quicks Mode) and Standard Mode ( Standards Mode)
The difference between the two modes is mainly concentrated in the box model interpretation of CSS, and in BOM. It means that the dependent object of the scroll bar has changed
In weird mode, the scroll bar belongs to the body. If you want to get the height and width of the scroll bar, you need to use document.body.scrollTop
and in standard mode You need to use document.documentElement.scrollTop

and the switching method between the two modes is mainly determined by doctype, see: http://dancewithnet.com/2009/06/14/activating-browser-modes- with-doctype/

Starting from IE6, IE uses a property document.compatMode to detect whether the document is switched to weird mode or in standard mode
If the value of document.compatMode
is BackCompat: that’s it In quirks mode
is CSS1Compat: in standard mode


So in order to work properly in both modes,
we need to determine which mode document.compatMode is
The judgment method is also very simple. You only need to judge whether the first letter of the compatMode value is b, and then you can select the dependent object of scrollTop
The judgment method can be written like this
document.compatMode.indexOf('b ')==0
You can also use regular expressions to write
/^b/i.test( document.compatMode )
The second one is more awesome. . Well, just use the second version (actually the first one performs better)

Now let’s write the second version

Code
Copy code The code is 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
}
}


Boom boom boom, that’s it. What can this function do? The first thing that comes to mind is drag and drop. Let’s write a small drag and drop function to verify it. Next

code
Copy code The code is 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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles