In Android Browser link does not always execute onClick causing focus instead

Question

I am trying to program a very standard JS behavior for a link using an HREF onClick handler, and I am facing a strange problem caused by what I believe to be focus/touch mode be

Answer 1

I wonder if it's related to the onclick -- am I correct to assume that every now and then clicking any link does not follow it? To me, this seems related to the way you touch the screen (or how this is interpreted), like maybe by clicking next to the link and dragging a bit, rather than clicking on the link?

(If my assumption is correct, then this might be faulty hardware: maybe you can try on another device? Or maybe it only happens on a particular side of the link if the screen is not aligned well, and then there might be some software offset one can change?)

Answer 2

Try inserting this "driver" into your page code, and let us know if it works . . . It seems to be working on my site which had the same problem:

//Mouse & Touch -> Consistent Click / Mouse Commands -> Useful driver
(function() {
  var isTouch = false;
  var simulated_flag = 'handler_simulated';
  var touch_click_array = {};
  const clickMoveThreshold = 20; //Pixels

  function mouseHandler(event) {
    if (isTouch) {
      if (!event.hasOwnProperty(simulated_flag)) {
        //Unreliable mouse commands - In my opinion
        var fixed = new jQuery.Event(event);
        fixed.preventDefault();
        fixed.stopPropagation();
      }
    }
    else {
      //Mouse commands are consistent
      //TODO: generate corresponding touches
    }
  }

  function mouseFromTouch(type, touch) {
    var event = document.createEvent("MouseEvent");
    event.initMouseEvent(type, true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY
      , false, false, false, false, 0, null);
    event[simulated_flag] = true;

    touch.target.dispatchEvent(event);
  };

  function touchHandler(event) {
    var touches = event.changedTouches
      ,first = touches[0]
      ,type = ""
      ;

    if (!event.hasOwnProperty(simulated_flag)) {
      isTouch = true;

      //Simulate mouse commands
      switch (event.type) {
        case "touchstart":
          for (var i = 0; i < touches.length; i++) {
            var touch = touches[i];
            touch_click_array[touch.identifier] = { x: touch.screenX, y: touch.screenY };
          }
          mouseFromTouch("mousedown", first);
          break;

        case "touchmove":
          for (var i = 0; i < touches.length; i++) {
            var touch = touches[i];
            var id = touch.identifier;
            var data = touch_click_array[id];
            if (data !== undefined) {
              if (Math.abs(data.x - touch.screenX) + Math.abs(data.y - touch.screenY) > clickMoveThreshold) {
                delete touch_click_array[id];
              }
            }
          }
          mouseFromTouch("mousemove", first);
          break;

        case "touchcancel":
          //Not sure what should happen here . . .
          break;

        case "touchend":
          mouseFromTouch("mouseup", first);
          for (var i = 0; i < touches.length; i++) {
            var touch = touches[i];
            if (touch_click_array.hasOwnProperty(touch.identifier)) {
              mouseFromTouch("click", touch);
              delete touch_click_array[touch.identifier];
            }
          }
          break;
      }
    }
  }

  document.addEventListener("mousedown", mouseHandler, true);
  document.addEventListener("mousemove", mouseHandler, true);
  document.addEventListener("mouseup", mouseHandler, true);
  document.addEventListener("click", mouseHandler, true);

  document.addEventListener("touchstart", touchHandler, true);
  document.addEventListener("touchmove", touchHandler, true);
  document.addEventListener("touchcancel", touchHandler, true);
  document.addEventListener("touchend", touchHandler, true);

})();

Now it isn't a 100% complete script - multi-touch would probably be a little wonky, and if you built an interface depending on touch commands, it doesn't generate those in this version. But, it fixed my link-clicking problem.

Erm - ps - it's using jQuery. If you need a non-jQuery version, you can probably just remove the new jQuery.Event from the mouseHandler() function (in other words, use the original event: var fixed = event;), and I believe most browsers would be ok. I am not exactly a js compatibility expert though.

PPS - Tested with Android 1.6

PPPS - Had to modify script to allow a threshold - actual devices were having some problems with a move event being fired during the press. Probably not ideal; if anyone wants to chime in on a better way for doing that, I'd be interested in hearing...

Answer 3

Try getting rid of the href attribute and see if that helps. For example, this works when viewed with the WebView component:

<p><a onClick="whereami()">Update Location</a></p>

Answer 4

Recently I came across exactly the same problem. I was using the onclick on a button. Sometimes it did not execute the javascript at all. The thing that worked for me was that enable the javascript before loading a url in the webview

    // Enable javascript
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    // To bind javascript code to android
    mWebView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

    mWebView.loadUrl(url);

Answer 5

Try enabling Javascript on the webview.

In the activity that holds the webview, try this...

WebView wv = (WebView) findViewById(R.id.webview);
wv.getSettings().setJavaScriptEnabled(true);

I was having he same problem, but figured out it was because I did not enabled Javascript.