title: Seems something is wrong when trying to set requestPointerLock()
body: <p>It seems something is wrong in my code, but I cannot figure what. I am trying to call pointerlockchange api to disable pointer and use mouse as fps controller. The problem is that always <strong>pointerlockerror</strong> is triggered and I get a <em>Error setting pointer lock!</em> message.</p>
  
  <p>The function is called inside <strong>$(document).ready</strong>. Here's the code.:</p>
  
  <pre><code>function initLock() {
  var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
  
  if ( havePointerLock ) {
      var element = document.body;
      console.log('Cathing element', element);
      var pointerlockchange = function ( event ) {
          if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
              controls.enabled = true;
              console.log('Pointer lock enabled!')
          } 
          else {
              controls.enabled = false;
          }
      }
  
      var pointerlockerror = function ( event ) {
          console.log('Error setting pointer lock!');
      }
  
      // Hook pointer lock state change events
      document.addEventListener( 'pointerlockchange', pointerlockchange, false );
      document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
      document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
  
      document.addEventListener( 'pointerlockerror', pointerlockerror, false );
      document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
      document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
  
  
      // Ask the browser to lock the pointer
      element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
  
      if ( /Firefox/i.test( navigator.userAgent ) ) {
          var fullscreenchange = function ( event ) {
              if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {
                  document.removeEventListener( 'fullscreenchange', fullscreenchange );
                  document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
                  element.requestPointerLock();
              }
          }
  
          document.addEventListener( 'fullscreenchange', fullscreenchange, false );
          document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );
  
          element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
          element.requestFullscreen();
      } 
      else {
          element.requestPointerLock();
      }
  } 
  else {
      console.log('Sorry, pointer lock cannot be set.');
  }
  </code></pre>
  
  <p>}</p>