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() 
        }

### 在地图应用中实现右击事件处理的方法 在地图应用程序中,添加右击事件的功能通常涉及监听用户的鼠标右键点击操作,并执行相应的回调函数。以下是基于不同技术栈的具体实现方法。 --- #### 方法一:使用高德地图 API 实现右击菜单 高德地图提供了 `AMap.ContextMenu` 类用于创建上下文菜单(即右键菜单)。以下是一个完整的例子,展示如何为地图上的某个区域(如多边形)添加右击菜单[^1]: ```javascript var g_mapObj = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] }); // 创建右键菜单实例 var sub_menu; sub_menu = new AMap.ContextMenu(); // 向菜单中添加选项项 sub_menu.addItem("删除围栏", function () { deleteFence(g_mapObj); }, 0); sub_menu.addItem("查询围栏内车辆", function () { queryFenceVehicle(g_mapObj); }, 1); // 给多边形绑定右击事件 var polygon = new AMap.Polygon({ path: [ [116.39, 39.9], [116.40, 39.9], [116.40, 39.91], [116.39, 39.91] ], fillColor: 'blue', strokeColor: 'red' }); g_mapObj.add(polygon); polygon.on("rightclick", function (e) { sub_menu.open(g_mapObj, e.lnglat); // 打开右键菜单 }); ``` 这段代码展示了如何通过监听 `"rightclick"` 事件来打开自定义的右键菜单,并将其定位到用户点击的地图位置。 --- #### 方法二:使用 OpenLayers 实现 Feature 右击弹窗 对于基于 OpenLayers 的地图应用,可以通过监听鼠标的 `"contextmenu"` 事件来捕获右击操作,并结合 `Overlay` 提供交互功能[^3]。下面是一段示例代码: ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import VectorSource from 'ol/source/Vector'; import GeoJSON from 'ol/format/GeoJSON'; import VectorLayer from 'ol/layer/Vector'; import Overlay from 'ol/Overlay'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); // 添加矢量数据层 const vectorSource = new VectorSource(); vectorSource.addFeatures(new GeoJSON().readFeatures({ type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: { title: '测试点', description: '这是一个测试点描述' } }] })); const vectorLayer = new VectorLayer({ source: vectorSource }); map.addLayer(vectorLayer); // 监听右击事件 map.on('contextmenu', function (evt) { evt.preventDefault(); // 阻止默认浏览器右键菜单 const feature = map.forEachFeatureAtPixel(evt.pixel, function (f) { return f; }); if (feature) { addPopup(feature, evt.coordinate); } }); function addPopup(feature, coordinate) { const popup = document.createElement('div'); const properties = feature.getProperties(); const popupContent = ` <h3>${properties.title}</h3> <p>${properties.description}</p> `; popup.innerHTML = popupContent; const overlay = new Overlay({ element: popup, positioning: 'bottom-center', offset: [0, -20] }); map.addOverlay(overlay); overlay.setPosition(coordinate); } ``` 该代码实现了当用户右击某一特征(Feature)时,会在对应位置显示一个带有标题和描述信息的弹窗。 --- #### 方法三:集成天地图服务并扩展右击功能 如果使用的是天地图作为底图服务,则可以按照其官方文档说明加载瓦片地图[^4],并通过类似的机制添加右击事件。例如: ```javascript var map = L.map('map').setView([39.90923, 116.397428], 10); L.tileLayer('http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥', {}).addTo(map); map.on('contextmenu', function (e) { alert(`您右击了坐标(${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)})`); e.originalEvent.preventDefault(); // 阻止默认行为 }); ``` 这里简单地打印出了用户右击的位置经纬度信息。 --- ### 总结 无论是高德地图还是 OpenLayers 或 Leaflet 等框架,都可以轻松实现右击事件的相关功能。核心思路在于: - 对于高德地图,主要依赖 `AMap.ContextMenu` 和 `"rightclick"` 事件; - 对于 OpenLayers,需捕捉 `"contextmenu"` 并配合 `Overlay` 构建交互界面; - 对于天地图或其他瓦片服务提供商,可直接监听原生 DOM 事件完成定制化需求。 根据项目所使用的具体工具链选择合适的解决方案即可满足业务需求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值