Summary of mouse events and individual events in the phone

Take a look at the mouse events and phone touch events today.

One, mouse events

1. The onmousedown event is triggered when the left mouse button is pressed. For example: when the mouse element boxq1 on, change its background color.

var box1 = document.getElementById ("box1"function= ' green ';};

2. onmouseup event, triggered when the left mouse button is lifted. For example: the mouse button before the element box1 background color is red, when pressed to green, and then turned red.

var box1 = document.getElementById ("box1"function= ' green '   function() {   = ' red ';};

3. onmousemove event, triggered when the mouse moves over an element. For example: When the mouse moves on the element box1, the console outputs the mouse position.

function (e) {    var x = E.pagex;     var y = e.pagey;    Console.log (' mouse axis: ' +x+ ' ****** mouse ordinate: ' +y);};

4. Onmouseenter event, when the mouse enters the element of an instant trigger, only when the mouse enters the element is triggered. For example: When the mouse enters the element box1, the element background color changes to green.

It differs from the onmousedown event in that the latter is triggered by a second press, while the former is triggered at the moment the element is entered, i.e. the mouse is triggered on the element boundary.

var box1 = document.getElementById ("box1"function() {    = ' green ';};

5. OnMouseLeave event, when the mouse moves out of the element's instantaneous trigger, only when the mouse moves out of the element when triggered, occurs at the element boundary. For example: When the mouse enters the element box1, the background color is changed to green, the element is moved out and then changed to red.

var box1 = document.getElementById ("box1"function() {    = ' green '  ) function () {    = ' red ';};

6. onmouseover event, when the mouse on the element above the trigger, as long as the mouse left over the element will be triggered, only trigger once, regardless of whether the mouse movement, this is the difference between it and onmousemove. such as: the mouse on the element box1 is always in the console input number one.

function () {    console.log (new  Date ());};

7. onmouseout event, when the mouse left the target element is triggered, the effect and the principle of MouseLeave no difference, just in Firefox without Onmouseenter and OnMouseLeave, Use only onmouseover and onmouseout, whereas in IE you can use Onmouseennter and onmouseleave instead of the top two.

Second, mobile phone touch events

1. Ontouchstart event, touch the Start event, when the phone screen is touched by the instant triggered. For example, when touching the phone, the position coordinates of the current touch are output.

var box1 = document.getElementById ("box1"function(e) {    var touch = E.touches[0];     var x = number (touch.clientx);     var y = number (touch.clienty);    Console.log ("The horizontal axis of the current touch point" +x+ "* * * * * * * * * * current touch point ordinate" +y);};

2. Ontouchmove event, touch the entire process triggered when the finger moves on the screen when the trigger. Example: Gets the current touch position when the finger moves on the screen.

var box1 = document.getElementById ("box1"function(e) {    var touch = E.touches[0];     var x = number (touch.clientx);     var y = number (touch.clienty);    Console.log ("The horizontal axis of the current touch point" +x+ "* * * * * * * * * * current touch point ordinate" +y);};

3. Ontouchend event, touch the end of the instant trigger, that is, when the finger left the screen triggered. For example: When the finger leaves the screen, the background color of the element is changed.

var box1 = document.getElementById ("Box1");     function (e) {    var touch = e.touches[0];     = ' green ';};

4. Ontouchcancel event, the touch process is triggered when the system is canceled, when some higher level events occur (such as telephone access or pop-up information) will cancel the current touch operation, that is, trigger ontouchcancel. The game, archive, and so on are usually paused during ontouchcancel.

Precautions:

Phone Touch Events Get focus Differences:

Native notation:

var e = window.event;

var touchs = e.touches[0];

var StartX = number (Touchs.pagex);

jquery notation:

var e = window.event;

var touchs = e.originalevent.targettouches[0];//Get First Contact

var StartX = number (Touchs.pagex);

Third, mobile phone gesture events

1. Ongesturechange event, must be multi-touch to trigger events, such as mobile phone rotation, scaling and other operations. Such as:

var div = document.getElementById ("div"function(e) {    //  Scale represents the magnification that the gesture produces, less than 1 is reduced, greater than 1 is magnified, and the original is 1    var scales = e.scale;     // the rotation represents the angle of the rotation gesture, the value interval [0,360], positive clockwise rotation, negative value counterclockwise    var angle = e.rotation;};

Iv. Gravity Sensing Events

　　1. Gravity Induction event is actually using the Window.orientation event, by judging whether the mobile phone is a horizontal screen or vertical screen to achieve gravity induction effect. You only need to add the Onorientationchange event for the body node. In this event, the Window.orientation property is given the value that represents the current phone's direction. The list of values for Window.orientation is as follows:
0: Same orientation as page first load
-90: In the original direction clockwise turn 90°
180: Turn 180°
90: Counterclockwise Turn 90°

Summary of mouse events and individual events in the phone