听起来很简单但绝对是一场噩梦。我无法检测到按下的退出按钮。我需要知道是否退出全屏模式，因为您无法阻止按下退出按钮。 javascript被注入到HTML视图中加载的HTML。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet" />
<div class="team_area">
<div class="slider-team">
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="bx">
<div>
<img src="resources/image/img1.jpg" class="img-responsive img-circle ">
</div>
<div>
<h4>jamie sidens</h4>
<p>founder</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
</div>
<div>
<ul class="social-nav">
<li><a class="facebook" href="#"><span class="fa fa-facebook"></span></a>
</li>
<li><a class="twitter" href="#"><span class="fa fa-twitter"></span></a>
</li>
<li><a class="google-plus" href="#"><span class="fa fa-google-plus"></span></a>
</li>
<li><a class="linkedin" href="#"><span class="fa fa-linkedin"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>仅当视图不是全屏时才有效！
全屏：
$(document).keyup(function(e) {
if (e.keyCode === 27) {
console.log("esc pressed")
}
});
答案 0 :(得分：3)
由于您使用的是jQuery，因此您可以添加一个侦听器来检查全屏状态的更改。它不会告诉您它是打开还是关闭全屏，但您可以检查所有状态：
// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
if(!viewer.isFullScreen()) {
// you are out of fullscreen
} else {
// you are in fullscreen
}
});
正如我们在评论中所说，vanilla js非常适合：
document.addEventListener('webkitfullscreenchange', function(e) {});