Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to understand Touch events in Web front-end development". In daily operation, I believe many people have doubts about how to understand Touch events in Web front-end development. Xiaobian consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful for you to answer the doubts about "how to understand Touch events in Web front-end development". Next, please follow the editor to study!

However, developing a web page that supports touchscreen is very different from the traditional web page. Take the mouse hover event, for example, there is a table on the page, and when the mouse points to the table's title, you want to display a floating tooltip somewhere nearby. Of course, you want the tooltip to attract more attention from the viewer, so you customize a DIV element and make it show or hide dynamically through JavaScript. This program is simple and works well on many different versions of browsers on ordinary devices. But there is a problem when you browse the web on a device that supports a touch screen. The device does not support a mouse, so users cannot use the mouse to hover the title elements of the table. Users * This is because the browser triggers mouseover and mouseout events by default, and these two events are only done during the operation of touching the screen with your fingers, and you have no way to control it. This is just a small example of many differences, and there are many differences, such as when you click a picture button on a traditional device without using the mouse to scroll the DIV continuously, while on the touchscreen the browser defaults to displaying the right-click menu, preventing the event from continuing. On traditional devices, the system usually allows only one mouse to accept the operation of the user at the same time, while the touch screen generally supports multi-touch and even supports a variety of different gestures, such as sliding left and right, two zoom in and out, rotation and so on.

With the development of HTML5, in order to support the operation of touch screen, many browser manufacturers have added a lot of events supporting touch to their browser engines. However, because the W3C does not provide a unified standard, or the situation that the standard follows varies greatly among different browser vendors, we have to do some special processing for the browser version. This reminds me that IE browser is different from other browsers in many ways, and this time is no exception!

Here are some pages that describe support for touch events in different browsers, and readers can see how they differ.

IE browser support for touch events: http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

Firefox browser support for touch events: https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events?redirectlocale=en-US&redirectslug=DOM%2FTouch_events

There are basically two camps: IE browsers and browsers based on the Webkit kernel.

However, IE itself has some differences due to compatibility problems between different versions, such as IE7, IE8, IE9 and IE10. Browsers based on the Webkit kernel, such as Firefox, Safari, Chrome, etc., are commonly used. It is important to note that Safari provides a Desktop version of Windows, which is different from the browser version that Apple provides on its own devices, so it needs to be distinguished when developing and testing.

So how do you develop a generic page that supports touch events? Basically, we only need to distinguish between browsers with IE and Webkit kernels, and the remaining compatibility issues are usually easier to solve. This page of MSDN introduces IE's support for pointers and gesture events http://msdn.microsoft.com/zh-cn/library/ie/hh773557.aspx, which talks about how to detect support for pointer events, which we can use to distinguish IE from other browsers. Look at the following program snippet:

If (window.navigator.msPointerEnabled) {/ * Events for IE only*/ document.getElementById ("id0") .addEventListener ("MSPointerOver", function (e) {/ * Add mouse over event for touch*/ if (e.pointerType = = e.MSPOINTER_TYPE_MOUSE) {methods.onMouseOver (this, e);}}) Document.getElementById ("id0") .addEventListener ("MSPointerOut", function (e) {/ * Add mouse out event for touch*/ if (e.pointerType = = e.MSPOINTER_TYPE_MOUSE) {methods.onMouseOut (this, e);}}) Document.getElementById ("id0") .addEventListener ("MSPointerDown", function (e) {if (e.pointerType = = e.MSPOINTER_TYPE_TOUCH) {/ * Do something for touch input only*/ methods.onTouchInput (This [XSS _ clean]);} else {/ * Do something for non-touch input*/ methods.onMouseClick (This [XSS _ clean]) }});} else {/ * Events for non-IE or IE without msPointerEnabled*/ $(this) .bind ("touchstart", function (e) {e.preventDefault (); methods.onMouseClick (This [XSS _ clean]); methods.onMouseOver (this, e);}) / * Common Mouse events: mouseover, mouseout, click*/ $(this) .click (function () {methods.onMouseClick (this);}); $(this) .hover (function (e) {methods.onMouseOver (this, e);}, function (e) {methods.onMouseOut (this, e);});}

The code has two main branches, for browsers with IE and Webkit kernels. In IE browsers, the MSPointerDown event does not automatically block mouse events, so you need to determine the pointer type through event.pointerType. Event.pointerType is an enumerated variable with three values:

MSPOINTER_TYPE_TOUCH = 2

MSPOINTER_TYPE_PEN = 3

MSPOINTER_TYPE_MOUSE = 4

It's strange why there is no enumeration value with a value of 1. Maybe it's used as a reservation! This means that MSPointerDown events trigger mouse-related events at the same time, in fact, mouse events are triggered in the first place. So we need to judge the pointer type first and deal with it differently. In order to increase the compatibility of the page and make it have a better experience on devices that support mouse operation, MSPointerOver and MSPointerOut events are specially added to the code, and it is judged that the corresponding mouse event is executed only when the pointer type is MSPOINTER_TYPE_MOUSE.

Here are a few compatibility issues to consider:

1. The Window.navigator.msPointerEnabled statement will only determine whether the browser supports MSPointer-related events, not whether the user's device supports touch operations. Currently, only on IE10, the object does not return undefined, and other versions of browsers consider that the object does not exist. If you want to determine whether the user's device supports touch operation, you should use Window.navigator.msMaxTouchPoints. If the object exists and the result returned is greater than 1, the device supports touch operation and supports multi-touch.

two。 In IE, MSPointer-related events are triggered only when the browser supports it, and mouse events are triggered at the same time if the page element is also accompanied by a mouse event.

3. Browsers in the Webkit kernel support touchstart events, and MSPointer-related events are considered invalid on these browsers. The e.preventDefault () statement prevents the default behavior of the mouse from being triggered by the mouse hover event.

So, the above code snippet is also compatible

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.