On the Web front end development in the Touch event

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

  Now mobile devices become more and more popular, in providing convenience at the same time, touch screen also allows the user to gradually get rid of the shackles of the traditional keyboard and mouse operation, human-computer interaction more convenient. This is not only reflected in the strong and diverse APP applications, Web applications are also due to the rise of the touch screen and become more rich and colorful. For example, a user in the traditional devices (including Touch Edition) by using a mouse and keyboard to operate webpage, zoom, drag elements, page scrolling etc. Some of the common mouse and keyboard events such as mouseover, mouseout, MouseMove, click, foucs, blur provided a good page for our interactive operation, can refer to a specific W3school.

   However, to support the development of webpage and the traditional touch screen on the webpage are very different. Take the mouse hover events, such as a form page, when the mouse is pointing to the table in title when you want to display a floating tooltip somewhere nearby. Of course, you want the tooltip to cause the visitor's attention, so you customize a DIV element and the JavaScript to make it dynamic display or hide. This procedure is very simple, and in many different versions of the browser common equipment are running well. But if you browse the webpage when problems in equipment support of the touch screen has come, the device does not support the mouse, so the user cannot use the title element to form hover mouse. The user can only and webpage to interact with devices is to use your fingers to touch or slide the screen, but in a non touch friendly webpage with a finger to trigger the traditional mouse hover event will look very strange, you'll find out tooltip in your fingers touch the moment the screen, and then immediately disappear. This is because the browser default trigger mouseover and mouseout two events, and these two events only in the fingers touch the screen this one operation, you have no way to control it. This is just a small example in many different, there are many places is not the same, if you use the mouse to click a picture button does not move for continuous rolling of DIV in conventional equipment, and on the touch screen browser will default to you want to show the right click menu and prevent the event to continue. The traditional equipment usually the same time system only allows a mouse accepted the user's operation, and touch screens are generally support multi touch support even different gestures, such as slide from left to right, two zoom and rotation.

  With the development of HTML5, in order to support the touch screen operation, multiple browser manufacturers in their browser engine added a lot of support touch events. But because the W3C does not provide a unified standard, or should follow the standards in different browser manufacturers in the situation also has the very big difference, so we had to do some special treatment of browser version. This reminds me of the IE browser in many ways with other browser is different, this is no exception!

  Here are some page introduces in different browsers support for touch events, the reader can see what are the differences between them.

  The IE browser support for touch events:

  The Firefox browser support for touch events: ;redirectslug=DOM%2FTouch_events

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

  But IE itself due to compatibility problems between different versions of some common difference, such as IE7, IE8, IE9 and IE10. The core Webkit browser such as Safari Chrome and so on, are commonly used. It should be noted that, Safari provides a Windows Desktop version, this version is different from the Apple provides its own equipment version of the browser, so need to be separated in the development test.

  So how can we develop a general support for the touch event page? Basically, we only need to distinguish between IE and Webkit core browser compatibility issues on the line, the remaining are usually relatively good solution. This page introduces support for MSDN IE pointer and gesture events which have talked about how to detect the pointer event support, we can use this method to the difference between IE and other browsers. Look at this program fragment:

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.parentNode);
        }
        else {
            /*Do something for non-touch input*/
            methods.onMouseClick(this.parentNode);
        }
    });
}
else {
    /*Events for non-IE or IE without msPointerEnabled*/
    $(this).bind("touchstart", function (e) {
        e.preventDefault();
        methods.onMouseClick(this.parentNode);
        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, the IE and Webkit core browser. In a IE browser, the MSPointerDown event does not automatically stop the mouse events, so we need to judge the pointer types by event.pointerType. event.pointerType is an enumeration variable, a total of three values:

  MSPOINTER_TYPE_TOUCH = 2

  MSPOINTER_TYPE_PEN = 3

  MSPOINTER_TYPE_MOUSE = 4

  Very strange why no value of 1 for the enumeration value? May be used as retention! That is to say the MSPointerDown event will trigger the mouse related events in the trigger at the same time, the fact that the mouse events are the start trigger. Therefore, we need to first determine the pointer types, different treatment. In order to increase the page compatibility, so that it can better support mouse operation equipment experience, the code has added the MSPointerOver and MSPointerOut events, and to determine when the pointer type to MSPOINTER_TYPE_MOUSE to execute the corresponding mouse events.

  Here are some compatibility issues need to be considered:

  1. Window.navigator.msPointerEnabledThe statement will only if the browser supports MSPointer related events, but does not determine the user whether the device supports a touch operation. At present only in the IE10 the object does not return undefined, the other version of the browser are regarded the object does not exist. If you want to determine the user whether the device supports a touch operation, you should use the Window.navigator.msMaxTouchPoints, if the object is present and the returned result is greater than 1, said device support touch operation and support multi touch.

  In IE 2, MSPointer related events will only be triggered when the browser support, if the page elements, but also with a mouse event, then the mouse events will also be triggered at the same time.

  3 the core Webkit browser support for touchstart events, MSPointer related events in the browser is regarded as invalid. Through the e.preventDefault () statements can prevent mouse default behavior, so as not to let the mouse hover event.

  So, the above code fragment is also compatible with the <IE10 and IE10, as well as compatible on IE10 touch and mouse operation, and non core IE browser on the touch and mouse operation. There is a situation that is not considered, IE10 <in case of touch operation, believe that such devices should be very difficult to see.!

  Of course, you can move the mouse Click events as a touch event processing, if the elements in addition to Click without any other event. But if the element and mouse hover related events, the user to trigger the mouse hover in the touch at the same time, in this case, you might consider using the above logic to handle the cross events.

  Development of touch friendly webpage there are many things worth studying, after all, a touch screen device is two years before the rise of Web application, and both are better than those of APP in the development of cost or cross platform compatibility. In addition, in addition to touch (touch), gestures (gestures) aspects of the operation is also very reuse, after all, you don't want the user to always use a finger to operate your webpage. Here is a MSDN article describes how to use the gesture operation page in IE, I will introduce how to add the gestures event on the page to everyone in a later article.

  Also want to share with you the next pointer.js, it should be done at present is compatible with the framework of a different browser version touch events better, but still perfect, a test also found events in some cases cannot be properly trigger. GENARALIZED INPUT ON THE CROSS-DEVICE WEB this article is also worth learning.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Mars at November 14, 2013 - 8:46 PM