jquery 如何通过滚动鼠标退出全屏(使用全屏API创建)，或者如果无法通过左键单击退出

9fkzdhlc 于 2023-11-17 发布在 jQuery

关注(0)|答案(1)|浏览(114)

我在jQuery中使用JavaScript，我正在做一个大学项目，要求有点严格。我在我的图片库中使用全屏。我有点在黑暗中绊倒，因为这是我第一次用JavaScript编写代码，更不用说为网站编写代码了，我试图利用eventListener，尝试从这里改编一段代码：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API，但这显然不是正确的方法。我想让我对API的利用更好一点，因为我选择了阻力最小的路径。这是我编写代码的尝试，不管它有什么价值。

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

字符串

jquery

来源：https://stackoverflow.com/questions/77461872/how-can-i-exit-fullscreen-created-by-using-fullscreen-api-by-scrolling-my-mous

1条答案

按热度按时间

iovurdzv1#

我在下面展示了一种方法。
Codepen

const toggleFullScreen = () => {
  if(!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    return true
  }
  else {
    document.exitFullscreen();
    return false
  }
}

const handleScroll = e => {
  toggleFullScreen();
}

const toggleLink = document.querySelector('.toggle')
const el = document.querySelector('.element')

document.addEventListener('fullscreenchange', e => {
  if(!document.fullscreenElement) {
    el.removeEventListener('scroll', null)
  }
})

toggleLink.addEventListener('click', e => {
  e.preventDefault();
  const fullscreen = toggleFullScreen();
  
  if(fullscreen) {
    el.addEventListener('scroll', handleScroll)
  }
})

字符串

赞(0）回复(0）举报 2023-11-17

我来回答

jquery 如何通过滚动鼠标退出全屏(使用全屏API创建)，或者如果无法通过左键单击退出

1条答案

相关问题

热门标签

最新问答