按下ESC时切换Javascript全屏按钮

我有一个全屏模式的按钮，按钮上写着“开”或“关”，效果很好：

<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>

我以为我的问题已经解决了，但后来我发现当全屏按钮被点击时，

.click

也被触发。它将触发按钮两次

然后我尝试这样做以防止正常的点击反应：

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

我做了一把小提琴，但它不起作用，我仍然发布它，因为这是一种更容易使用javascript的方法：

因为小提琴坏了，我会把它放在我的网站上，直到问题解决：问题解决了

如果有不清楚的地方，请告诉我， 谢谢

[编辑]
我自己解决的

**请尝试此代码**它工作正常。
.btn切换{
保证金：0.4rem；
填充：0；
位置：相对位置；
边界：无；
高度：1.5雷姆；
宽度：3rem；
边界半径：1.5雷姆；
颜色：#6b7381；
背景：bdc1c8；
}
.btn切换：焦点，
.btn-toggle.focus，
.btn切换：focus.active，
.btn-toggle.focus.active{
大纲：无；
}
.btn切换：之前，
.btn切换：之后{
线高：1.5雷姆；
宽度：4rem；
文本对齐：居中；
字号：600；
字体大小：0.75rem；
文本转换：大写；
字母间距：2px；
位置：绝对位置；
底部：0；
过渡：不透明度.25s；
}
.btn切换：之前{
内容:"关";；
左-4rem；
}
.btn切换：之后{
内容:"On";；
右：-4rem；
不透明度：.5；
}
.btn切换>.handle{
位置：绝对位置；
顶部：0.1875雷姆；
左：0.1875雷姆；
宽度：1.125rem；
身高：1.125雷姆；
边界半径：1.125rem；
背景：#fff；
过渡：左。25秒；
}
.btn-toggle.active{
过渡：背景色0.25s；
}
.btn-toggle.active>.handle{
左：1.6875雷姆；
过渡：左。25秒；
}
.btn切换。活动：之前{
不透明度：.5；
}
.btn切换。活动：之后{
不透明度：1；
}
.btn切换：之前，
.btn切换：之后{
颜色：#6b7381；
}
.btn-toggle.active{
背景色：#29b5a8；
}
.btn-toggle.btn-lg{
保证金：0.5雷姆；
填充：0；
位置：相对位置；
边界：无；
高度：2.5雷姆；
宽度：5雷姆；
边界半径：2.5雷姆；
}
.btn切换。btn lg:焦点，
.btn-toggle.btn-lg.focus，
.btn切换.btn lg:focus.active，
.btn-toggle.btn-lg.focus.active{
大纲：无；
}
.btn切换。btn lg:之前，
.btn切换。btn lg:之后{
线高：2.5雷姆；
宽度：5雷姆；
文本对齐：居中；
字号：600；
字号：1rem；
文本转换：大写；
字母间距：2px；
位置：绝对位置；
底部：0；
过渡：不透明度.25s；
}
.btn切换。btn lg:之前{
内容:"关";；
左-5雷姆；
}
.btn切换。btn lg:之后{
内容:"On";；
右：-5rem；
不透明度：.5；
}
.btn-toggle.btn-lg>.handle{
位置：绝对位置；
顶部：0.3125雷姆；
左：0.3125雷姆；
宽度：1.875雷姆；
高度：1.875雷姆；
边界半径：1.875雷姆；
背景：#fff；
过渡：左。25秒；
}
.btn-toggle.btn-lg.active{
过渡：背景色0.25s；
}
.btn-toggle.btn-lg.active>.handle{
左：2.8125雷姆；
过渡：左。25秒；
}
.btn切换.btn lg.active:之前{
不透明度：.5；
}
.btn切换.btn lg.active:之后{
不透明度：1；
}
.btn切换.btn lg.btn sm:之前，
.btn切换.btn lg.btn sm:之后{
线高：0.5雷姆；
颜色：#fff；
字母间距：.75px；
左：0.6875雷姆；
宽度：3.875雷姆；
}
.btn切换.btn lg.btn sm:之前{
文本对齐：右对齐；
}
.btn切换.btn lg.btn sm:之后{
文本对齐：左对齐；
不透明度：0；
}
.btn切换.btn lg.btn sm.active:之前{
不透明度：0；
}
.btn切换.btn lg.btn sm.active:之后{
不透明度：1；
}
.btn toggle.btn lg.btn xs:before，
.btn toggle.btn lg.btn xs:after{
显示：无；
}
全屏：
函数全屏（）{
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（元素.允许键盘输入）；
}
}否则{
如果（文档取消全屏）{
document.cancelFullScreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitcancelfillscreen）{
document.webkitcancelfulscreen（）；
}
$（'.myswitch'）.removeClass（'active'））
}
}
文件。添加的文件列表（“完整屏幕更改”，exitHandler）；
文件。addEventListener（“webkitfullscreenchange”，exitHandler）；
文件。添加的EventListener（“MozzullScreenChange”，exitHandler）；
文件。添加的文件列表器（“MSFullscreenChange”，exitHandler）；
函数exitHandler（）{
如果（！document.fullscreenElement&&！document.webkitIsFullScreen&&！document.mozFullScreen&&！document.msFullscreenElement）{
$（'.myswitch'）.removeClass（'active'））
document.getElementById（“myonoffswitch”）。单击（）；
console.log（“这不是全屏”）；
$（“.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部”）.css（“右边距”，”）；
}否则{
console.log（“此全屏”）；
$（“.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部”）.css（“左边距”，”）；
}
}

我突然发现我的切换按钮只是一个复选框，所以我试着这样做：

document.getElementById（“myonoffswitch”）.checked=false
而且似乎效果很好
 您好，您是否看到问题也在这里而没有按escape？我认为问题是显而易见的。当您在全屏模式下首先进入时，您还没有添加
exitHandler
，因此即使使用escape退出，一切都可以正常工作。但是，在全屏模式下和检测到更改后
<div class="onoffswitch" onclick="fullscreen(); return false;">

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() {
// Any fullscreen change will trigger this function
// Normalscreen to fullscreen or fullscreen to normalscreen
// with the button or with ESC-key.
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {

    document.getElementById("myonoffswitch").click();
        // This event is always trickered, but it's meant to be trickered when ESCAPE is used,    

    } 
}

**Please try this code** It's Working fine.

<style>
.btn-toggle {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #bdc1c8;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
  line-height: 1.5rem;
  width: 4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity .25s;
}
.btn-toggle:before {
  content: 'Off';
  left: -4rem;
}
.btn-toggle:after {
  content: 'On';
  right: -4rem;
  opacity: .5;
}
.btn-toggle > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left .25s;
}
.btn-toggle.active {
  transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
  left: 1.6875rem;
  transition: left .25s;
}
.btn-toggle.active:before {
  opacity: .5;
}
.btn-toggle.active:after {
  opacity: 1;
}

.btn-toggle:before,
.btn-toggle:after {
  color: #6b7381;
}
.btn-toggle.active {
  background-color: #29b5a8;
}
.btn-toggle.btn-lg {
  margin: 0 5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 2.5rem;
  width: 5rem;
  border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
  outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
  line-height: 2.5rem;
  width: 5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity .25s;
}
.btn-toggle.btn-lg:before {
  content: 'Off';
  left: -5rem;
}
.btn-toggle.btn-lg:after {
  content: 'On';
  right: -5rem;
  opacity: .5;
}
.btn-toggle.btn-lg > .handle {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background: #fff;
  transition: left .25s;
}
.btn-toggle.btn-lg.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
  left: 2.8125rem;
  transition: left .25s;
}
.btn-toggle.btn-lg.active:before {
  opacity: .5;
}
.btn-toggle.btn-lg.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
  line-height: 0.5rem;
  color: #fff;
  letter-spacing: .75px;
  left: 0.6875rem;
  width: 3.875rem;
}
.btn-toggle.btn-lg.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-lg.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-xs:before,
.btn-toggle.btn-lg.btn-xs:after {
  display: none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Fullscreen:  
<div class="col-sm-5">
    <button type="button" class="btn btn-lg btn-toggle myswitch" data-toggle="button" aria-pressed="false" onclick="fullscreen()" autocomplete="off">
    <div class="handle"></div>
    </button>
</div>
<script>
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();
        }
       $('.myswitch').removeClass('active')
    }
}

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

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        $('.myswitch').removeClass('active')
    document.getElementById("myonoffswitch").click();
        console.log("this is not fullscreen");
        $(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner").css("margin-right","");
    } else {
        console.log("this fullscreen");
        $(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner").css("margin-left","");
    }
}
</script>