移動端H5頁面阻止圖片和文字被選中

趙連江發布于2019-08-02 14:23 / 2307人閱讀

摘要：頁面設置圖片和標簽等不可選中阻止標簽等文字被選中在對應元素的樣式中加阻止瀏覽器點擊圖片查看的行為常見于瀏覽器背景圖的方式插入這種是比較普遍的方式使用事件阻止默認行為的方法

H5頁面設置圖片和span標簽等不可選中 1.阻止span標簽等文字被選中

在對應元素的CSS樣式中加

-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
user-select: none;

2.阻止瀏覽器點擊圖片查看的行為(常見于uc瀏覽器)

1.背景圖的方式插入(這種是比較普遍的方式)

background:url(./img/tip.png) norepeat center;
background-size: cover;

2.使用js事件阻止默認行為的方法

const imgMask = document.getElementById("mask");
imgMask.addEventListener("click", function (event) {
    event.stopPropagation();
    event.preventDefault();
});

GPU云服務器云服務器 H5移動端上傳圖片被選中文字移動端webrtc h5 移動端頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53767.html

H5項目常見問題匯總及解決方案

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎知識： H5頁面窗口自動調整到設備...

marser 2019-08-20 14:08 評論0 收藏0
H5項目常見問題及注意事項

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。 Meta基礎知識： H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面 //一、HTML頁面結構 // width 設置viewport寬度，為一...

honhon 2019-08-21 10:51 評論0 收藏0
H5項目常見問題及注意事項

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。 Meta基礎知識： H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面 //一、HTML頁面結構 // width 設置viewport寬度，為一...

Little_XM 2019-08-30 13:07 評論0 收藏0