IE 10 Touch Event

Absrtact: I am currently studying IE 10 touch events. Although I'm lucky enough to have a Windows 8 tablet, I'm still looking for a simpler way to perform a base on a classic notebook without having to switch to a tablet every time

I am currently studying IE 10 touch events. Although I'm lucky enough to have a Windows 8 tablet, I'm still looking for a simpler way to perform basic testing on classic notebooks without having to switch to a tablet every time. In the process of looking for this method, I found some tips and tricks, and with these experiences, you can debug the IE 10 Touch event in your code without using a touch device. Positive effects: This approach also helps you test, debug, and respond to Web design!

Prerequisites: Before you take this tutorial, you first need to follow these steps:

IE 10 Touch Event Model

If you are not familiar with how the touch is performed, you can read the following three articles first:

1.ie10 browser and the touch input of Metro style application

2. Multi-touch and mouse input in all browsers

3. Use the gesture event to achieve beyond the pan, zoom and tap range of other features

You can refer to the Pointer.js Library as a supplemental resource that simulates the IE 10 model for other browsers.

Windows 8 Simulator Analog Touch

The Windows emulator installs a variety of development tools that are typically used to test and debug a Metro style application. You can read more details by reading the following article: Windows emulator first.

However, we can use emulators to debug Web applications running in IE10. Let me introduce you to the specific implementation method.

1. Run "program Files (x86) \common Files\Microsoft Shared\windows simulator\11.0" folder, start the emulator, and then click the Desktop icon (Microsoft.Windows.Simulator.exe).

2. Start the IE10 browser and turn to the "Internet Options"--> "Advanced" tab. Check the "Prohibit script debugging (Internet Explorer)", "Prohibit script debugging (Other)" is unchecked:

3. Turn to the URL that needs to be tested and/or debugged. For example, test the following test cases: the finger Painting under IE test drive. With this simulator, we can use the following two buttons to simulate the classic mouse input and/or touch switching mode.

At first, you'd think you'd get the same result:

However, after clicking the following buttons:

You will find a double touch simulation effect of scaling and rotation:

The dual touch feature becomes more interesting in the application of the following test cases: Browser Surface

With the simulator, you can simulate the scaling and rotation effects by touching gestures.

debugging JavaScript code with visual Studio 2012

If you want to further test and debug your touch experience, you may need to debug JavaScript code. The first obvious method is to press the F12 key and use the IE10 Developer tool. However, it can be uncomfortable to use the F12 key in a small emulator window.

Another better solution is to use the debugger in Visual Studio 2012. The following steps are implemented:

1. On the main session (outside the emulator), start visual Studio RC Express and go to the debug-> loading process ...

2. Locate the "Iexplorer.exe" process ("X86,script") and load:

3. If everything works, the results of using the browser surface test case should be as shown in the following figure:

If this is not the case, it may be because you have loaded the wrong iexplore.exe process or forgotten to remove the check before the "Disable script debugging" option.

If you select the correct process, you can see the JavaScript file in the right nesting section of Solution Explorer under the Script files node.

4. Then, we will focus on the debugging experience of JavaScript. For example, open the "demo.js" file and add a breakpoint on line 136th:

if (Options.inertiabounce ()) {:

5. Photographing images and using touch simulation to process images should automatically interrupt visual Studio:

Then, step through the code, view the JavaScript console output, right-click the function, and jump directly to the function definition. This allows you to get the advanced debugging experience.

In summary, you can debug JavaScript touch logic that supports IE10 browsers without the help of any touch devices. Of course, you need to test the final code and Web application on a real touch device to really understand how the code works in real terms. However, the method can actually help you save your time.

Testing and debugging of responsive design

The simulator and VS 2012 can also help you test and debug your response design. First, let's review what the simulator has to offer.

I searched the web for the best web site to implement the principle of responsive design and used the following screenshots on the http://garretkeizer.com/Web site. You can find other cool sites to test on http://mediaqueri.es.

The following is a Web site design that is performed in Internet Explorer 10 browsers using the emulator's default settings.

Let's review some of the more cool options that are driving the emulator further:

1. Test the design changes in portrait or landscape mode by clicking the following buttons.

The following illustration shows the results of the selected Web site:

2. You can also simulate various shape coefficients and resolution display results by clicking the following buttons.

3. The following image shows the results of the site under the resolution 2560x1440 (compared to the previous screenshot with the default resolution of 1366 x768):

4. If you want to continue, you can use the excellent Dom Explorer tool in VS 2012 to help you check and edit CSS on site. For example, after loading the debugger, we can see a window called DOM Explorer. Although your mouse is placed on an HTML node, you will still see areas in the emulator that are displayed in bright colors.

Of course, you can check, edit, and trace styles in Visual Studio to fix potential CSS design problems. I hope these tips will help you and save you time. Want to always pay attention to these free tools!