阻止默认行为
首先了解通过preventDefault阻止默认行为,写个a标签跳转百度
此时可以跳转
<a href="http://baidu.com" id="bd">跳转百度</a>
通过e.preventDefault 阻止默认行为,让a标签不能跳转
<a href="http://baidu.com" id="bd">跳转百度</a>
<script>
let bd = document.querySelector('#bd')
bd.onclick=(e)=>{
e.preventDefault();
console.log("阻止跳转")
}
</script>
效果如图所示:
自定义右击菜单栏实例
首先画一个要触发事件的div,并准备自定义菜单栏的样式menu
<style>
.menu{
width: 100px;
height: 300px;
background: blanchedalmond;
position: absolute;
}
</style>
<div id="demo" style="width: 300px;height: 300px; background: black;">
</div>
然后获取这个div并添加鼠标右击事件oncontextmenu,通过e.preventDefault()阻止默认行为使右击菜单不显示。
并添加自定义右击窗口的div,为其添加样式menu。
将每次鼠标点击的位置赋给这个div。
let demo = document.querySelector('#demo')
//自定义右击菜单栏(oncontextmenu鼠标右击事件)
demo.oncontextmenu = function (e) {
e.preventDefault(); //阻止默认行为(右击菜单栏不显示)
// 每次点击后移除上个menu
let menu =document.querySelector('.menu')
if(menu) menu.remove()
//创建一个div,添加类
menu=document.createElement('div')
menu.classList.add('menu')
document.body.appendChild(menu)
// 位置(点在哪出现在哪)
menu.style.left = e.pageX+'px'
menu.style.top = e.pageY+'px'
}
此时右击出现的自定义菜单栏不会消失,通过判断当前点击的(e.target)是否在menu里面 如果不在就移除它,实现点到别的地方消失。
window.onclick=(e)=>{
let menu =document.querySelector('.menu')
//判断当前点击的(e.target)是否在menu里面 如果不在就移除它
if(menu && !menu.contains(e.target)) //contains包含
menu.remove()
}