更新時(shí)間:2021-03-30 17:17:59 來源:動(dòng)力節(jié)點(diǎn) 瀏覽1638次
在現(xiàn)代瀏覽器中都內(nèi)置有大量的事件處理器。這些處理器會(huì)監(jiān)視特定的條件或用戶行為,例如鼠標(biāo)單擊或?yàn)g覽器窗口中完成加載某個(gè)圖像。通過使用客戶端的 JavaScript,可以將某些特定的事件處理器作為屬性添加給特定的標(biāo)簽,并可以在事件發(fā)生時(shí)執(zhí)行一個(gè)或多個(gè) JavaScript 命令或函數(shù)。HTML5 規(guī)范允許用戶自定義網(wǎng)頁(yè)上的任意元素全屏顯示,也就是所謂的HTML全屏事件。但是因?yàn)闉g覽器廠商原因,各瀏覽器存在差異。下面我們就來詳細(xì)看看HTML全屏事件。
一、屬性
① document.fullscreen 判斷當(dāng)前文檔是否全屏顯示內(nèi)容,已棄用,不建議使用
② document.fullscreenElement 當(dāng)前文檔正以全屏模式顯示的Element節(jié)點(diǎn),如果沒有全屏模式,則返回null,可以用于替代上面的屬性
二、方法
③ Element.requestFullscreen() 請(qǐng)求瀏覽器(user agent)將特定元素(甚至延伸到它的后代元素)置為全屏模式,隱去屏幕上的瀏覽器所有 UI 元素,以及其它應(yīng)用。返回一個(gè) Promise,并會(huì)在全屏模式被激活的時(shí)候變成 resolved 狀態(tài)。
④ Document.exitFullscreen() 用于請(qǐng)求從全屏模式切換到窗口模式,會(huì)返回一個(gè) Promise,會(huì)在全屏模式完全關(guān)閉的時(shí)候被置為resolved 狀態(tài)。
三、事件
① fullscreenchange事件,瀏覽器進(jìn)入或者離開全屏?xí)r觸發(fā)
② fullscreenerror事件,瀏覽器切換全屏狀態(tài)報(bào)錯(cuò)回調(diào)
由于兼容問題, 需要加兼容前綴,例如webkit內(nèi)核瀏覽器: 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;
??}
六、事件監(jiān)聽
1.addEventListener(‘不帶on的事件名’,事件函數(shù),是否冒泡 )事件綁定
2.綁定多少個(gè)事件就執(zhí)行多少個(gè),不會(huì)存在前后事件覆蓋的問題
3.冒泡 從下往上,把事件一直向上傳遞,點(diǎn)擊最下面的元素,最下面先執(zhí)行
4.捕獲 從上往下,把事件一直向下傳遞,點(diǎn)擊最上面的元素,最上面先執(zhí)行
七、event對(duì)象
標(biāo)準(zhǔn)事件函數(shù)默認(rèn)的第一個(gè)參數(shù)
是描述發(fā)生事件的詳細(xì)信息
八、阻止默認(rèn)事件
1.事件默認(rèn)行為:當(dāng)一個(gè)事件發(fā)生的時(shí)候?yàn)g覽器自己會(huì)默認(rèn)做的事情
2.比如正常情況下,鼠標(biāo)可以拖拽圖片,a標(biāo)簽跳轉(zhuǎn),手指長(zhǎng)按可以選中文字,右鍵菜單等
3.e.preventDefault( ) 阻止默認(rèn)行為,且解決在IOS上有網(wǎng)頁(yè)回彈的橡皮筋現(xiàn)象
4.選中文本use-select: none; 阻止選擇
九、阻止冒泡
在需要的時(shí)候的,標(biāo)準(zhǔn)用e.stopPropagation( ) 阻止冒泡問題,
配合capture使用,阻止冒泡
十、獲取手指對(duì)象
touches 當(dāng)前屏幕上的手指列表(所有觸點(diǎn)的集合)
targetTouches 當(dāng)前元素上的手指列表(觸發(fā)事件元素上的觸點(diǎn)集合)
changedTouches 觸發(fā)當(dāng)前事件的手指列表
獲取手指的個(gè)數(shù) e.changedTouches.length
獲取坐標(biāo) e.changedTouches[0].pageX
以上就是HTML全屏事件涉及到的全部?jī)?nèi)容,由于內(nèi)容過于冗雜我們一時(shí)間很難掌握,我們可以結(jié)合本站的HTML教程加以理解,深入探究HTML全屏事件的工作原理和機(jī)制。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年,加薪神器
Java架構(gòu)師班
工作3~5年,晉升架構(gòu)
提交申請(qǐng)后,顧問老師會(huì)電話與您溝通安排學(xué)習(xí)