Javascript超时或mouseup事件，但不是同时在Android浏览器中同时发生？

Question

I'm trying to write a javascript web-app where an action is taken on mouseup , and another action is taken after the user has held down the button long enough. My code works in every browser I have tried on Windows and Linux, but on all three Android browsers I've tried (Chrome, Firefox, and native) I seem to lose the mouseup event if the timer fires.

The core of my code seems quite straightforward:

btn.addEventListener("mousedown", function(){
   myTimer = setTimeout(function(){
     btn.textContent += "t";
     outVal = "b";
   }, 500);
});
btn.addEventListener("mouseup", function(){
   clearTimeout(myTimer);
   btn.textContent += outVal;
   outVal = "a"
});

Jsfiddle here: https://jsfiddle.net/wanderinglogic/sycL0e53/

On non-Android browsers, if the user releases the button after a short time it outputs a , if the user holds the button it (after 500ms) outputs t and then when the user releases the button outputs b .

But on Android browsers, if the users releases the button after a short time it still outputs a , and if the user holds the button it (after 500ms) still outputs t , but then the final button release doesn't output b .

Is there some extra event on Android that is interfering with my mouseup that I don't know about?

Answer 1

Well, Android does (in general) does not have mouse input... On touch would be better way to describe it. And as such the user input works differently then on non-touch interfaces. This whole touchy subject was the death for mouse over events. See: understanding touch events