JS阻止默认行为实现自定义右击菜单栏

本文介绍如何使用JavaScript的preventDefault方法阻止元素的默认行为,例如阻止a标签的跳转和自定义div元素的右击菜单,通过监听事件和动态创建元素实现自定义功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

阻止默认行为

首先了解通过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() 
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值