按ESC退出全屏时同步切换Javascript全屏按钮状态问题求助

我有一个用来切换全屏模式的开关按钮，按钮会显示ON或OFF，点击按钮本身的全屏切换功能是正常的，按钮的HTML结构如下：

<div class="onoffswitch" onclick="fullscreen()"> 
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> 
  <label class="onoffswitch-label" for="myonoffswitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
  </label> 
</div>

但遇到了一个问题：进入全屏后按ESC键退出时，按钮仍然显示OFF，状态没有同步更新。

我一开始尝试用模拟点击复选框的方式修正这个问题，代码如下：

document.getElementById("myonoffswitch").click();

本以为问题解决了，结果发现点击按钮触发全屏切换时，这个模拟点击的代码也会被触发，导致按钮状态被触发两次，反而出了新问题。

后来我试着给按钮的点击事件加return false来阻止正常点击的响应：

<div class="onoffswitch" onclick="fullscreen(); return false;">

但这样一来，模拟点击也没法改变按钮状态了——不管是真实点击还是模拟点击，都被return false阻止了。

我试过各种方法都没解决，当时使用的JavaScript代码是这样的：

function fullscreen() { 
  if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) { 
    if (document.documentElement.requestFullScreen) { 
      document.documentElement.requestFullScreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullScreen) { 
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
  } else { 
    if (document.cancelFullScreen) { 
      document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  } 
} 

document.addEventListener('fullscreenchange', exitHandler); 
document.addEventListener('webkitfullscreenchange', exitHandler); 
document.addEventListener('mozfullscreenchange', exitHandler); 
document.addEventListener('MSFullscreenChange', exitHandler); 

function exitHandler() { 
  // 任何全屏状态变化都会触发这个函数
  // 不管是从普通屏切到全屏，还是从全屏切回普通屏
  // 不管是通过按钮还是ESC键触发的
  if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) { 
    document.getElementById("myonoffswitch").click(); 
    // 这段代码本来应该只在按ESC键退出时触发，但现在每次状态变化都会触发
  } 
}

我之前做了个JsFiddle示例但没法正常运行，不过后来把代码放到自己的网站上，问题已经解决了。

[编辑]
我已经自行解决了这个问题，更新了对应的JsFiddle示例。

内容的提问来源于stack exchange，提问作者web-stars