title: Touch mapping and input focusing on mobile with Javascript
body: <p>I've recently added a js touch mapping function (found somewhere here, in stackoverflow) to one of my pages so I can make my Jquery draggables work on iOS Safari (drag and drop won't work without this mapping, as far as I have seen)</p>
  
  <p>This is the function:</p>
  
  <pre><code>function touchHandler(event)
  {
  var touches = event.changedTouches,
      first = touches[0],
      type = "";
  
       switch(event.type)
  {
      case "touchstart": type = "mousedown"; break;
      case "touchmove":  type="mousemove"; break;        
      case "touchend":   type="mouseup"; break;
      default: return;
  }
  altKey, shiftKey, metaKey, button, relatedTarget);
  
  var simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent(type, true, true, window, 1,
                            first.screenX, first.screenY,
                            first.clientX, first.clientY, false,
                            false, false, false, 0, null);
  
  first.target.dispatchEvent(simulatedEvent);
  event.preventDefault();
  }
  </code></pre>
  
  <p>Everything works pretty well... except when I focus an input or textarea (the Facebook comments plugin, specifically) and the iOS keyboard shows up.</p>
  
  <p>After I enter my text and click on the "send" button above the input, the function gives wrong Y coordinates to the simulated mouse event (I believe this happens because the keyboard changes the page's height) and I end up clicking somewhere above that button.</p>
  
  <p>The input blurs, but the send button does not become clicked. As if that wasn't sadly enough, another button on the page (some pixels above the send one) becomes clicked and links to another page.</p>
  
  <p>I thought I could disable the mapping when the input became focused, but it seems that those Facebook comments plugins elements aren't accessible at all.</p>
  
  <p>Any help is appreciated, I've been working around this for days now...</p>