HTML5 常用事件

鼠标右键事件 contextmenu

用法：

let div = document.createElement('div');
document.body.appendChild(div);
div.innerHTML = '鼠标右键弹出的内容';
div.style.position = 'absolute';
div.style.display = "none";
document.addEventListener("contextmenu", function (event) {
    event.preventDefault();
    div.style.display = "block";
    //获取鼠标视口位置
    div.style.top = event.clientY + "px";
    div.style.left = event.clientX + "px";
});

监听路由hash变化 hashchange

vue 路由的hash模式

window.addEventListener("hashchange", (e) => {
    console.log(e);
});

监听路由history变化 popstate

vue 路由的history模式

window.addEventListener("popstate", (e) => {
    console.log(e);
});

//跳转
history.pushState({aaa:1}, '', '/abc')

页面可见性改变事件 visibilitychange

这个事件适合在标签不可见的时候减少网络请求、服务器压力等，也可以做一些好玩的事情，比如改变网页标题的文字。

用法：

document.addEventListener("visibilitychange", function(){
    document.title = document.visibilityState === 'hidden' ? "用户离开了" : "用户回来了";
});

• visibilitychange是h5的一个事件（IE9不支持），可以通过这个事件来暂停css3动画、暂停音乐等；
• document.hidden的值为：true、false；
• document.visibilityState的值为：hidden（当浏览器最小化、切换tab、电脑锁屏时）、visible（用户正在查看当前页面时）、prerender（文档加载离屏或者不可见）、unloaded（当文档将要被unload时）。

桌面右下角消息推送 Notification

摘取博客：HTML5 Web Notification桌面通知

效果展示如下：

代码：

var popNotice = function() {
    if (Notification.permission == "granted") {
        var notification = new Notification("Hi，帅哥：", {
            body: '可以加你为好友吗？',
            icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
        });
        
        notification.onclick = function() {
            text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友！';
            notification.close();    
        };
    }    
};

if (Notification.permission == "granted") {
    popNotice();
} else if (Notification.permission != "denied") {
    Notification.requestPermission(function (permission) {
      popNotice();
    });
}

禁止页面部分操作

• 禁用右键菜单

oncontextmenu="return false"

• 禁止选择，实现元素内文本不被选中

onselectstart="return false"

• 禁止拖放，禁止鼠标在网页上拖动

ondragstart="return false"

• 禁止拷贝，页面内容是不允许复制

oncopy="return false"

• 禁止粘贴，输入框不允许粘贴

onpaste="return false"

• 禁止剪贴

oncut = "return false"

• 禁止保存

<noscript><iframe src="*.htm"></iframe></noscript> //放在head里面