专注Java教育13年 全国咨询/投诉热线:400-8080-105

首页 hot资讯 详解HTML全屏事件

详解HTML全屏事件

更新时间:2021-03-30 17:17 来源:动力节点 浏览356次

在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为,例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript,可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个 JavaScript 命令或函数。HTML5 规范允许用户自定义网页上的任意元素全屏显示,也就是所谓的HTML全屏事件。但是因为浏览器厂商原因,各浏览器存在差异。下面我们就来详细看看HTML全屏事件

一、属性

① document.fullscreen 判断当前文档是否全屏显示内容,已弃用,不建议使用

② document.fullscreenElement 当前文档正以全屏模式显示的Element节点,如果没有全屏模式,则返回null,可以用于替代上面的属性

二、方法

③ Element.requestFullscreen() 请求浏览器(user agent)将特定元素(甚至延伸到它的后代元素)置为全屏模式,隐去屏幕上的浏览器所有 UI 元素,以及其它应用。返回一个 Promise,并会在全屏模式被激活的时候变成 resolved 状态。

④ Document.exitFullscreen() 用于请求从全屏模式切换到窗口模式,会返回一个 Promise,会在全屏模式完全关闭的时候被置为resolved 状态。

三、事件

①  fullscreenchange事件,浏览器进入或者离开全屏时触发

②  fullscreenerror事件,浏览器切换全屏状态报错回调

由于兼容问题, 需要加兼容前缀,例如webkit内核浏览器:  webkitRequestFullScreen

四、轮子

import fscreen from './node_modules/fscreen/src/index.js';

console.log(fscreen.fullscreenEnabled);

console.log(fscreen.fullscreenElement);

if (fscreen.fullscreenEnabled) {

    document.addEventListener('keydown', function (e) {

        if (e.keyCode == 13) {

            if (!fscreen.fullscreenElement) {

                fscreen.requestFullscreen(dv);

            } else {

                fscreen.exitFullscreen();

            }

        }

    });

}

fscreen.addEventListener('fullscreenchange', function (e) {

    console.log(e);

    console.log(fscreen.fullscreenElement)

});

五、全屏伪类选择器    

:full-screen .box{}

:webkit-full-screen .box{}

    #dv:fullscreen {

      text-align: center;

      vertical-align: middle;

      display: flex;

      align-items: center;

      justify-content: center;

  }

六、事件监听

1.addEventListener(‘不带on的事件名’,事件函数,是否冒泡 )事件绑定

2.绑定多少个事件就执行多少个,不会存在前后事件覆盖的问题

3.冒泡 从下往上,把事件一直向上传递,点击最下面的元素,最下面先执行

4.捕获 从上往下,把事件一直向下传递,点击最上面的元素,最上面先执行

七、event对象

标准事件函数默认的第一个参数

是描述发生事件的详细信息

八、阻止默认事件

1.事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情

2.比如正常情况下,鼠标可以拖拽图片,a标签跳转,手指长按可以选中文字,右键菜单等

3.e.preventDefault( ) 阻止默认行为,且解决在IOS上有网页回弹的橡皮筋现象

4.选中文本use-select: none; 阻止选择

九、阻止冒泡

在需要的时候的,标准用e.stopPropagation( ) 阻止冒泡问题,

配合capture使用,阻止冒泡

十、获取手指对象

touches 当前屏幕上的手指列表(所有触点的集合)

targetTouches 当前元素上的手指列表(触发事件元素上的触点集合)

changedTouches 触发当前事件的手指列表

获取手指的个数 e.changedTouches.length

获取坐标 e.changedTouches[0].pageX

以上就是HTML全屏事件涉及到的全部内容,由于内容过于冗杂我们一时间很难掌握,我们可以结合本站的HTML教程加以理解,深入探究HTML全屏事件的工作原理和机制。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>

返回顶部