Android Phone Touchend event does not trigger a problem

Problem description

$ (document). On ("Touchstart Touchmove", ". Btn-highlight",function(event) {        $ (this). AddClass ("hover");    }). On ("Touchend touchcancel", ". Btn-highlight",function(event) {        $ (this). Removeclass ("hover");    });

At first, I wanted to use this piece of code to simulate the highlight effect of some buttons (that is, after clicking a button there will be a different style, like PC hover)

But there is a problem, that is, on the Android phone, the following method is often not triggered, very occasionally, really make our troubles.

After reviewing the data, we found that the browser's default event affected the triggering of our event. Then it involves blocking the default event, very simply, plus event.preventdefault ();

The final available code is

$ (document). On ("Touchstart Touchmove", ". Btn-highlight",function(event) {        $ (this). AddClass ("hover");        Event.preventdefault ();    }). On ("Touchend touchcancel", ". Btn-highlight",function(event) {        $ (this). Removeclass ("hover");    });

In the CSS inside the. Btn-highlight plus the corresponding style can see the effect, such as button A and button B want to show different effects, then

A and B are added first. btn-highlight

In CSS:

a.hover{/* First style */}

b.hover{/* the second style of */}

The sequel to the problem ~ ~ ~

After discovering this, what if the button is a link??? Skip, because the default event is disabled, now put Touchstart and touchmove separate write OK

$ (document). On ("Touchstart", ". Btn-highlight",function() {        $ (this). AddClass (" Hover ");    }). On ("Touchmove", ". Btn-highlight",function(event) {        event.preventdefault ();    }). On ("Touchcancel touchend", ". Btn-highlight",function(event) {        $ (this). Removeclass ("hover");    });

Android Phone Touchend event does not trigger a problem