鼠标右键事件 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里面