First look at what mouse events are available: Mousedown,mouseup_and_click,dblclick,mousemove and MouseOver mouseout. Then you'll explain the relatedtarget,fromelement and toelement these event properties. Finally, Microsoft's MouseEnter and MouseLeave events.
Compatibility issues with browsers, which can be viewed in the browser compatibility List.
Example
Here's an example. can help you understand the content below.
Mousedown,mouseup,click and DblClick are registered on this link. Can be viewed in the text box below. Or in a dialog box. (Please try it in the original text: http://www.quirksmode.org/js/events_mouse.htm）
Mousedown,mouseup,click
If the user clicks on an element, then at least three events are triggered, in the order that:
1, MouseDown, when the user presses the mouse button on this element
2, MouseUp, when the user releases the mouse button on this element
3, click, when a MouseDown and a MouseUp are detected on this element occurs
Usually MouseDown and MouseUp are more useful than click. Some browsers do not allow you to read the OnClick event information. And sometimes the user uses the mouse to make certain actions click events did not follow.
Let's say the user presses the mouse button on a link and then moves the mouse away and releases the mouse button when it is moved. So this time the link just happened MouseDown event. Similarly, the user moves to the link after clicking the mouse, then the link only mouseup occurs. There are no click events in either of these cases.
This is not a problem depending on the behavior of the user. But you should register for the Onmousedown/up event, unless you are completely interested in the click to happen.
If you use a pop-up alert box, the browser may lose track of the event and how many times it has occurred, causing confusion. So it's better not to use that.
Dblclick
DblClick events are rarely used. If you want to use it, be sure not to register the onclick and DblClick event handlers on an HTML element. If two are registered, you need to know what the user is doing is basically impossible.
In short, when a user double-clicks on an element, the Click event always occurs before DblClick. In addition, in Netscape, the second click is always handled separately before DblClick. Anyway, the warning box is very dangerous here.
So make sure your click and DblClick are well separated to avoid a lot of complicated things.
Mousemove
The MouseMove event works well, but it is important to note that it may require a lot of system resources to handle all the MouseMove events. When the user moves the mouse over a pixel, the mousemove is triggered once. Even if nothing happens, long and complex functions can take a long time to affect the efficiency of the site: Everything slows down, especially in the old stuff.
So the best way to do this is to register the onmousemove event when you need it, and remove it as soon as it's not needed:
Copy Code code as follows:
Element.onmousemove = dosomething;
Later
Element.onmousemove = null;
mouseover and Mouseout
Take another look at this example, replace it with Mouserover and try it. This example simply adds a onmouseover event handler to the EV3. However, you will notice that not only the EV3 triggers events on EV4 or spans. Before Mozilla 1.3, the mouse would be triggered when it entered a text area.
The reason is, of course, event bubbling. The user triggered the MouseOver event on the ev4. There is no onmouseover event handler on this element, but on EV3. So when the event bubbles up to the EV3, the program executes.
Now this setting is completely correct, but there is a problem. The first problem is the goal. Suppose the mouse enters the ev4:
-----------------------------------------
| This is div id= "Ev3" |
| ----------------------------- |
| | This is div id= "Ev4" | |
| | --------<--------|
| | | span | | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
<--------: Mouse movement
Now the target/srcelement of this event is ev4: The element of the event, as the mouse moves over him. But when the following occurs:
-----------------------------------------
| This is div id= "Ev3" |
| ----------------------------- |
| | This is div id= "Ev4" | |
| | -------- | |
| | | span | | |
| | | --------> | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
--------: Mouse Movement
The target/srcelement of this event is the same. In this same or mouse into the ev4. You may, however, do different things when the mouse comes from ev3 or from span. So we need to know where the mouse comes from.
Relatedtarget,fromelement,toelement
The Relatedtarget attribute was added to the mouseover and Mouseout events by the consortium. In the MouseOver event is to include the mouse from where, under the mouseout is including the mouse where to go.
Microsoft also has two properties that contain the following information:
1, fromelement refers to the mouse before the elements. It's more useful in the mouseover situation.
2, toelement represents the mouse will go to that element. It is more useful in the case of mouseout.
In our first example, Relatedtarget/fromelement contains a reference to a ev3, and in our second example span. Now you know the source of the mouse.
Cross-browser code
So if you want to know where the mouse comes from in mouseover, then:
Copy Code code as follows:
function DoSomething (e) {
if (!e) var e = window.event;
var reltarg = E.relatedtarget | | E.fromelement;
}
If you want to know the whereabouts of the mouse in the case of Mouseout:
Copy Code code as follows:
function DoSomething (e) {
if (!e) var e = window.event;
var reltarg = E.relatedtarget | | E.toelement;
}
Mouse left a layer
In a layered navigation menu you might want to know when the mouse leaves the layer so you can turn that layer off. So you registered an event handler for this layer of onmouseout. Event bubbling then causes the onmouseout to be triggered when the mouse leaves any layer.
--------------
| Layer |. onmouseout = dosomething;
| -------- |
| | Link | ----> We want to know about this mouseout
| -------- |
| -------- |
| | Link | |
| | ----> | But not about this one
| -------- |
--------------
----: Mouse movement
Another way to stop is when you move the mouse over this layer and then to a link, the browser registers a mouseout event on this layer. This makes me very confused (the mouse is still in the layer), but all browsers are OK.
So how do we let mouseout happen when the mouse really leaves the layer?
Copy Code code as follows:
function DoSomething (e) {
if (!e) var e = window.event;
var TG = (window.event)? E.srcelement:e.target;
if (tg.nodename!= ' DIV ') return;
var RELTG = (e.relatedtarget)? E.relatedtarget:e.toelement;
while (RELTG!= TG && reltg.nodename!= ' body ')
reltg= Reltg.parentnode
if (reltg== TG) return;
Mouseout took where mouse actually left layer
Handle Event
}
First gets the target of the event, which is the element where the mouse leaves. If Target is not a div (layer), understand the end function because the mouse does not really leave the layer.
If Target is a layer, we are not sure if the mouse left the layer or entered a link inside the layer. So check the relatedtarget/toelement of the event, which is the element that the mouse moves to.
We read this element, and then we iterate up through the DOM tree until the target (that is, the Div) of the event, or the BODY element.
If we encounter target as a child of the layer, then the mouse does not leave the layer. Stops the function from running.
When the function passes all the validations we can make sure that the mouse is really out of the layer, we can start the action (usually hiding this layer).
MouseEnter and MouseLeave
Microsoft also has a solution. He added two new events to MouseEnter and MouseLeave. In addition to the event bubbling not reaction is basically the same as mouseover and mouseout. They look at the elements that have registered events as an entire block, for the
MouseOver and mouseout do not react.
So these two events also solve our problem: they only make mouseover/out reactions to the elements that are bound.
These two events are now supported only by IE in the version above 5.5. Perhaps other browsers are going to draw on that day.
End
Now it is the end of the introduction to the event. Good luck!
Original address: http://www.quirksmode.org/js/events_mouse.html
My Twitter: @rehawk
