Touch screen touchstart and click, touchstartclick

Touch screen touchstart and click, touchstartclick

Design effect: When you click or touch a part other than the red box menuList, the pop-up box menuList disappears.

Problem: I found a problem when I optimized the touch screen version. When menuList pops up and my fingers slide down the screen, the menuList bullet box does not disappear. Only when I click a part other than menuList by my fingers.

Check the code and find that the source code only defines the click event:

$(doc.body).on('click',function(e) {if (e.target.id != 'menu') headerMenu.hide();});

It indicates that the touch screen version does not parse the click and touch events.

So I checked the usage of touch and found that there are touchstart, touchmove, and touchend events, and they can be used directly like click.

Then change the code:

$(doc.body).on('click touchmove',function(e) {if (e.target.id != 'menu') headerMenu.hide();});

OK.

More demos and resolutions: http://www.aliued.cn/2013/04/27/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8Btouch-event%E7%AF%87.html

Html5 development for touch screens

Ontouchstart
Ontouchmove
Ontouchend
Ontouchcancel

Four touch events on the mobile platform

Therefore, their order should be noted: touchstart → mouseover → mousemove → mousedown → mouseup → click1
/**
* OnTouchEvent
*/
Var div = document. getElementById ("div ");
// Touchstart is similar to mousedown
Div. ontouchstart = function (e ){
// The touches attribute of an event is an array. One element represents a touch point at the same time, so that you can obtain each touch point of multi-touch through touches.
// Since we only have one touch, direct to [0]
Var touch = e. touches [0];
// Obtain the coordinates of the current touch point, which is equivalent to the clientX/clientY of the MouseEvent event.
Var x = touch. clientX;
Var y = touch. clientY;
};
// Touchmove is similar to mousemove
Div. ontouchmove = function (e ){
// You can add preventDefault to the touchstart and touchmove events to prevent the browser from scaling and scroll.
E. preventDefault ();
};
// Touchend is similar to mouseup
Div. ontouchup = function (e ){
// Nothing to do
};

How does js block touch-screen click events? When running to this page, the touch-screen click events on this page are blocked.

1. Override touchstart touchmove and other events so that these events do nothing
Example: document. ontouchstart = funciton () {return false ;};
2. Cancel event bubbling

3. delete your touch screen events.