1.contexmenu事件
单击鼠标右键,出现上下文菜单,可以结合event
对象的,clientX
与clientY
属性,制作一个自定义的上下文菜单。
contexmenu
事件是冒泡的,只要给docment指定一个事件处理程序,就可以在页面上所有的地方上使用该事件。
event.preventDefault(),
可以取消浏览器默认的上下文菜单
例子:自己再加点CSS的话,就会更漂亮
HTML部分
<div id="mydiv">我代表页面上的任何元素</div>
<ul id="myMenu" style="postion:absolute; visibility:hidden; background-color:red">
<li>新增</li>
<li>编辑</li>
<li>删除</li>
</ul>
JS部分
window.addEventLinstenner("load", (event) =>{
// 去掉div元素的默认上下文菜单
let div = docment.getElementById("mydiv");
div.addEventLinstenner("contexmenu", (event) =>{
event.preventDefault();
// 给自定义上下文菜单添加位置与是否显示
let menu = docment.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.right = event.clientY + "px";
menu.style.visibility = "visible";
});
//点击别的地方时,隐藏上下文(系统上下文就是这么隐藏的)
document.addEventLinstener("click", (event) =>{
docment.getElementById("myMenu").style.visibility = "hidden";
})
})
2.beforeunload事件
这个事件会在window上触发,用意是给开发者阻止页面被卸载的机会,这个事件会在页面被浏览器关闭时出发,会出现一个选择框,点击确认关闭当前页面,取消则不关闭。
window.addEventListenner("beforeunload", (event) =>{
let message = "你确定这样做吗?"
event.returnValue = message //对于ie与firefox要设置event.returnValue
return message //对于chrome与safari要返回一个message值
})
3.hashchange事件
用于在URL散列值(URL最后#后面的部分)发生变化时通知开发者
window.addEventListenner("hashchange", (event) =>{
console.log(`旧的URL:${event.oldURL}, 新的URL:${newURL}`)
//如果要确认当前散列值,最好使用locaction对象
console.log(`当前的URL:${location。hash}`)
})