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

最新推荐文章于 2024-06-26 18:41:22 发布

zyynb

最新推荐文章于 2024-06-26 18:41:22 发布

阅读量486

点赞数

CC 4.0 BY-SA版权

文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/zyynb/article/details/106585409

本文介绍如何使用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() 
        }