title: Preparing for main Click and Touch Events
body: <p>Trying to get the following code to work, a working example presented in jsfiddle will help. The codes for a game that should work on both click hardware and touchscreen hardware.</p>
  
  <p>If there's a way to avoid using an init function that seems to help. Unless you feel like adding an example of how to get a draw function call into the mix somehow.</p>
  
  <pre><code>&lt;p id="Xpos"&gt;&lt;/p&gt;
  &lt;p id="Ypos"&gt;&lt;/p&gt;
  
  &lt;script&gt;
  
  //############################### Mouse and Touch Events : Start
  
  &lt;!-- Source Code Web Site:  
  http://blog.patricktresp.de/2012/02/
  internet-explorer-8-
  and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/ --&gt;
  var el;
  el = document.getElementById('bgLayerMain');
  
  if( el.addEventListener )
  {
      el.addEventListener('mousedown', onMouseDown, false);
  }else if( el.attachEvent ) {
      el.attachEvent('onmousedown',    onMouseDown);
  }
  if( is_touch_device() ) {addListeners(); alert("here");}
  
  
  function stopEvent(e) {
  
  if(!e) var e = window.event;
  
  //e.cancelBubble is supported by IE -
      // this will kill the bubbling process.
  e.cancelBubble = true;
  e.returnValue = false;
  
  //e.stopPropagation works only in Firefox.
  if ( e.stopPropagation ) e.stopPropagation();
  if ( e.preventDefault ) e.preventDefault();
  
     return false;
  }
  
  
  function addListeners( el )
  {// Allow function call without passing parameters
  var e = el;
  if( !e )  e = document.getElementById('bgLayerMain');
  var el = e;
  
  if( el )
  {
      if( el.addEventListener )
      {
          el.addEventListener('mouseup', onMouseUp, true);
          el.addEventListener('mousemove', onMouseMove, true);
          el.addEventListener('touchstart', onTouchStart, true);
          el.addEventListener('touchmove', onTouchMove, true);
          el.addEventListener('touchend', onTouchEnd, true);
      }else if( el.attachEvent ) {
      // make sure mouse events have the prefix     &lt;strong&gt;on&lt;/strong&gt;
          el.attachEvent('onmouseup',    onMouseUp);
          el.attachEvent('onmousemove',    onMouseMove);
          el.attachEvent('touchstart',   onTouchStart);
          el.attachEvent('touchmove',    onTouchMove);
          el.attachEvent('touchend', onTouchEnd);
      }
  }
  }
  
  
  // also remove the Listeners correctly:
  function removeListeners( el ) {
  var e = el;
  if( !e )  e = document.getElementById('bgLayerMain');
  var el = e;
  if( el )
  {
  
      if( el.removeEventListener )
      {
          el.removeEventListener('mouseup', onMouseUp);
          el.removeEventListener('mousemove', onMouseMove);
          el.removeEventListener('touchstart', onTouchStart);
          el.removeEventListener('touchmove', onTouchMove);
          el.removeEventListener('touchend', onTouchEnd);
      }else if( el.detachEvent ) {
          el.detachEvent('onmouseup',    onMouseUp);
          el.detachEvent('onmousemove',    onMouseMove);
          el.detachEvent('touchstart',   onTouchStart);
          el.detachEvent('touchmove',    onTouchMove);
          el.detachEvent('touchend', onTouchEnd);
      }
  }
  }
  
  
  function onMouseDown(e) {
  log('-&amp;gt; mouse down');
  addListeners();
  e.touches = [{clientX: e.clientX, clientY: e.clientY}];
  onTouchStart(e);
  stopEvent(e);
  }
  function onTouchStart(e) {
  log('-&amp;gt; touch start');
  
  //do something with e.touches[0].clientX or e.touches[0].clientY
  updateMousePos(e.touches[0].clientX,e.touches[0].clientY);
  
  stopEvent(e);
  }
  
  
  function onMouseMove(e) {
  log('-&amp;gt; mouse move');
  e.touches = [{clientX: e.clientX, clientY: e.clientY}];
  onTouchMove(e);
  stopEvent(e);
  }
  function onTouchMove(e) {
  log('-&amp;gt; touch move');
  //do something with e.touches[0].clientX or e.touches[0].clientY
  updateMousePos(e.touches[0].clientX,e.touches[0].clientY);
  
  stopEvent(e);
  }
  
  
  function onMouseUp(e) {
  log('-&amp;gt; mouse up');
  e.touches = [{clientX: e.clientX, clientY: e.clientY}];
  removeListeners();
  stopEvent(e);
  }
  function onTouchEnd(e) {
  log('-&amp;gt; touch end');
  if( !is_touch_device() ) removeListeners();
  }
  
  
  function log(str) {
  var c;
  c = document.getElementById('console');
  c.innerHTML = str + '
  ' + c.innerHTML;
  }
  
  function is_touch_device() {
  return !!('ontouchstart' in window) ? 1 : 0;
  }
  
  function updateMousePos(){
  //update posX and posY
  }
  
  //############################### Mouse and Touch Events : End
  </code></pre>