1. 程式人生 > >H5頁面阻止圖片和文字被選中

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

nor mage 圖片查看 event https 標簽 講解 lec round

技術分享圖片

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();
});

這裏推薦一下我的前端學習交流群:784783012 ,裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴。2019最新技術,與企業需求同步。好友都在裏面學習交流,每天都會有大牛定時講解前端技術!

點擊:加入

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