With the introduction of touch-enabled Windows 8 or Chromebook Pixel, touch is now becoming part of the desktop experience. One of the biggest challenges for our web developers is building web menus that work not only on touch devices and mouse devices, but also on these devices where the user will use both input methods - sometimes simultaneously!
Many developers have made the menu in such a way: firstly detect whether an environment supports touch events. If it does, the menu will open in response to a touch event. Otherwise the drop down menu will open by a mouse over event. This assumption is obvious wrong to the devices where both touch and mouse input are available.
What make things more complicated(and frustrating) is that IE10 / IE 11 do not support the touchstart and touchend type of events. They group touch, mouse, and stylus events into a single abstract item known as a pointer. If we make the menu open on the MSPointerOver event and close on the MSPointerOut event, when users tap on the menu, the sub-menu opens, that is good. But when finger leaves the screen, the sub-menu will close. Is this what you want?(Surely not as it should only be closed by a second touch). Is this as what Microsoft has claimed "developers can easily write to pointer events and their apps just work no matter what input hardware is being used"?
My colleague told me Safari supports both a touch event model and a mouse event model. If the drop down menu listens to multiple events such as ontouchstart and onmouseover, we should consider cancelling others once one of them has been triggered.
These should all be considered and sorted to make the menu work well in all devices, and I determined not to go that far when I found the Menucool drop down menu is working great in all the devices I’ve tested with such as IE11 and Chrome on Win 8 touch screen machines, Microsoft surface, iPad, iPhones 4/5, and Android. Congratulations Menucool for your brilliant menu work!
Today I went to BestBuy to test my web menu on various desktops and devices, and found a DELL touch screen laptop that allows both touch and mouse input. What is making me crazy in the testing IE browser(IE 11, version 11.0.9600.16476) is that it will get both navigator.pointerEnabled and navigator.msPointerEnabled as true. How the developers in Microsoft can make this happen? I can see the Menucool ddmenu works on all machines. Can Menucool tells me how all IE10 and IE11 can be successfully handled by different IEs on all machines and devices, even when touch and mouse are both available simultaneously?