AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JS案例：在浏览器实现自定义菜单

2024-07-02 40
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS案例：在浏览器实现自定义菜单

前言

分享一下之前公司实现自定义菜单的思路，禁用浏览器右键菜单，使用自定义的菜单将其代替，主要功能有：鼠标右键调出菜单，双击选中/取消选中标签，新建标签，删除标签，调整位置，调整大小，取消拖拽，关闭菜单

设计思路

  • MessageCenter来自于消息中心，为组件提供基础通信功能
  • BaseElem: 自定义标签的基类，提供一些通用的方法和属性，继承自MessageCenter，通过消息中心对外通信
  • Menu: 菜单类，用于创建和显示自定义菜单。它继承自BaseElem，实现创建菜单、渲染菜单列表等方法
  • CustomElement: 自定义元素类，用于创建和操作自定义标签。它继承自BaseElem，提供创建标签、选中标签、复制标签、删除标签等方法
  • BaseDrag: 拖拽基类，提供了基本的拖拽功能。它继承自BaseElem，实现鼠标事件的处理和触发
  • Drag: 拖拽调整标签位置类，继承自BaseDrag，实现拖拽标签位置的功能
  • Resize: 拖拽调整标签尺寸类，继承自BaseDrag，实现拖拽调整标签尺寸的功能。

BaseElem

自定义标签基类提供了移动和删除标签功能，它充当公共类的作用，后面的自定义标签都继承与该类

/**
 * 自定义标签的基类
 */
class BaseElem extends MessageCenter {
    root: HTMLElement = document.body
    remove(ele: IParentElem) {
        ele?.parentNode?.removeChild(ele)
    }
    moveTo({ x, y }: { x?: number, y?: number }, ele: IParentElem) {
        if (!ele) return
        ele.style.left = `${x}px`
        ele.style.top = `${y}px`
    }
}

菜单类的作用是创建自定义菜单，代替浏览器原有的右键菜单。其中每个菜单子项的数据结构如下

type MenuListItem = {
    label: string
    name?: string
    handler?(e: MouseEvent): void
}

菜单类

export class Menu extends BaseElem {
    constructor(public menuList: MenuListItem[] = [], public menu?: HTMLElement) {
        super()
        this.root.addEventListener("contextmenu", this.menuHandler)
    }
    /**
     * 创建菜单函数
     * @param e 
     */
    menuHandler = (e: MouseEvent) => {
        e.preventDefault();// 取消默认事件
        this.remove(this.menu)
        this.create(this.root)
        this.moveTo({
            x: e.clientX,
            y: e.clientY
        }, this.menu)
        this.renderMenuList()
    }
    /**
     * 创建菜单元素
     * @param parent 父元素
     */
    create(parent: HTMLElement) {
        this.menu = createElement({
            ele: "ul",
            attr: { id: "menu" },
            parent
        })
    }
    /**
     * 菜单列表
     * @param list 列表数据
     * @param parent 父元素
     * @returns 
     */
    renderMenuList(list: MenuListItem[] = this.menuList, parent: IParentElem = this.menu) {
        if (!parent) return
        list.forEach(it => this.renderMenuListItem(it, parent))
    }
    /**
     * 菜单列表子项
     * @param item 单个列表数据
     * @param parent 父元素
     * @returns 列表子项
     */
    renderMenuListItem(item: MenuListItem, parent: HTMLElement) {
        const li = createElement({
            ele: "li",
            attr: {
                textContent: item.label
            },
            parent
        })
        li.addEventListener("click", item.handler ?? noop)
        return item
    }
}

我们在HTML中使用一下菜单功能，通过label配置菜单选项，handler设置点击事件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
 
        #menu {
            z-index: 2;
            position: fixed;
            width: 100px;
            min-height: 40px;
            background: lightcoral;
        }
 
        #menu li {
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
 
        #menu li:hover {
            background: lightblue;
        }
    </style>
</head>
 
<body>
    <script type="module">
        import { Menu } from "./index.js"
        // 初始化菜单功能
        const menu = new Menu([
 
            {
                label: "关闭", handler: (e) => {
                    menu.remove(menu.menu)
                }
            }
        ])
 
    </script>
</body>
 
</html>

效果如下

CustomElement

为了让菜单与被控标签解耦（实际上也没有联系），使用新的类承载标签管理。其中自定义标签主要包含以下功能：

create：新建标签

cloneNode：复制标签

removeEle：删除标签

select：选中/取消选中标签（通过双击触发该函数）

setCount：标签的计数器

export class CustomElement extends BaseElem {
    selectClass = "custom-box"// 未被选中标签class值
    private _selectEle: ICustomElementItem = null// 当前选中的标签
    count: number = 0// 计数器，区分标签
    constructor() {
        super()
        document.onselectstart = () => false// 取消文字选中
    }
    /**
     * 选中标签后的样式变化
     */
    set selectEle(val: ICustomElementItem) {
        const { _selectEle } = this
        this.resetEleClass()
        if (val && val !== _selectEle) {
            val.className = `select ${this.selectClass}`
            this._selectEle = val
        }
    }
    get selectEle() {
        return this._selectEle
    }
    /**
     * 初始化事件
     * @param ele 
     */
    initEve = (ele: HTMLElement) => {
        ele.addEventListener("dblclick", this.select)
    }
    /**
     * 复制标签时增加复制文本标识
     * @param elem 
     */
    setCount(elem: HTMLElement) {
        elem.textContent += "(copy)"
        ++this.count
    }
    /**
     * 选中标签后重置上一个标签的样式
     * @returns 
     */
    resetEleClass() {
        if (!this._selectEle) return
        this._selectEle.className = this.selectClass
        this._selectEle = null
    }
    /**
     * 新建标签
     * @returns 标签对象
     */
    create() {
        const ele = createElement({
            ele: "div",
            attr: { className: this.selectClass, textContent: (++this.count).toString() },
            parent: this.root
        })
        return ele
    }
    /**
     * 初始化标签
     * @param e 鼠标事件
     * @param elem 标签对象
     */
    add(e: MouseEvent, elem?: HTMLElement) {
        const ele = elem ?? this.create()
        ele && this.initEve(ele)
        this.moveTo({
            x: e.clientX,
            y: e.clientY
        }, ele)
    }
    /**
     * 复制标签操作
     * @param e 鼠标事件
     * @returns 
     */
    cloneNode(e: MouseEvent) {
        if (!this.selectEle) return
        const _elem = this.selectEle?.cloneNode?.(true) as HTMLElement
        _elem && this.root.appendChild(_elem)
        _elem && this.setCount(_elem)
        this.add(e, _elem)
        this.selectEle = _elem
    }
    /**
     * 删除标签
     * @returns 
     */
    removeEle() {
        if (!this.selectEle) return
        this.remove(this.selectEle as IParentElem)
        this.selectEle = null
        --this.count
    }
    /**
     * 选中/取消选中标签
     * @param e 
     */
    select = (e: MouseEvent) => {
        this.selectEle = e.target
    }
    /**
     * 点击body时取消选中（未使用）
     * @param e 
     */
    unselected = (e: MouseEvent) => {
        if (e.target === this.root) this.selectEle = null
    }
}

结合上述类的实现，我们在页面中增加几种菜单

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
 
        #menu {
            z-index: 2;
            position: fixed;
            width: 100px;
            min-height: 40px;
            background: lightcoral;
        }
 
        #menu li {
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
 
        #menu li:hover {
            background: lightblue;
        }
 
        .custom-box {
            line-height: 100px;
            text-align: center;
            width: 100px;
            height: 100px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            background: lightgreen;
            position: fixed;
            cursor: move;
        }
 
        .select {
            z-index: 1;
            border: 3px solid black;
        }
    </style>
</head>
 
<body>
    <script type="module">
        import { Menu, CustomElement } from "./index.js"
        // 初始化标签
        const elem = new CustomElement()
        // 初始化菜单功能
        const menu = new Menu([
            {
                label: "新建", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.add(e)
                }
            }, {
                label: "复制", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.cloneNode(e)
                }
            }, {
                label: "删除", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.removeEle()
                }
            },
            {
                label: "关闭", handler: (e) => {
                    menu.remove(menu.menu)
                }
            }
        ])
 
    </script>
</body>
 
</html>

效果如下

BaseDrag

完成上述基础功能后，我们可以尝试对标签位置和大小进行修改，所以我们建立一个鼠标拖拽的基类，用来实现拖拽的公共函数

/**
 * 拖拽基类
 */
class BaseDrag extends BaseElem {
    constructor(public elem: HTMLElement, public root: any = document) {
        super()
        this.init()
    }
    /**
     * 初始化事件
     */
    init() {
        this.elem.onmousedown = this.__mouseHandler//添加点击事件,避免重复定义
    }
    /**
     * 将一些公共函数在基类中实现
     * @param e 事件对象
     */
    private __mouseHandler = (e: Partial<MouseEvent>) => {
        const { type } = e
        if (type === "mousedown") {
            this.root.addEventListener("mouseup", this.__mouseHandler);
            this.root.addEventListener("mousemove", this.__mouseHandler);
        } else if (type === "mouseup") {
            this.root.removeEventListener("mouseup", this.__mouseHandler);
            this.root.removeEventListener("mousemove", this.__mouseHandler);
        }
        type && this.emit(type, e)// 触发子类的函数，进行后续操作
    }
    /**
     * 取消拖拽
     */
    reset() {
        this.elem.onmousedown = null
    }
}

可以看到，上述的代码的__mouseHandler函数中我们对鼠标事件进行了拦截，并且借助消息中心将事件传递出去，方便后续的拓展

Drag

接着是拖拽移动标签的功能，该类拖拽了鼠标按下和移动的回调

/**
 * 拖拽调整标签位置
 */
export class Drag extends BaseDrag {
    offset?: Partial<{ x: number, y: number }>// 鼠标点击时在元素上的位置
    constructor(public elem: HTMLElement) {
        super(elem)
        this.on("mousedown", this.mouseHandler)
        this.on("mousemove", this.mouseHandler)
    }
    /**
     * 鼠标事件处理函数，当鼠标按下时，记录鼠标点击时在元素上的位置；当鼠标移动时，根据鼠标位置的变化计算新的位置，并通过调用父类的moveTo方法来移动元素
     * @param e 
     */
    mouseHandler = (e: Partial<MouseEvent>) => {
        const { type, target, clientX = 0, clientY = 0 } = e
        if (type === "mousedown") {
            this.offset = {
                x: e.offsetX,
                y: e.offsetY
            }
        } else if (type === "mousemove") {
            const { x = 0, y = 0 } = this.offset ?? {}
            this.moveTo({
                x: clientX - x,
                y: clientY - y
            }, target as HTMLElement)
        }
    }
}

Resize

最后我们将位置改成高度宽度，实现一下调整标签尺寸的类

/**
 * 拖拽调整标签尺寸
 */
export class Resize extends BaseDrag {
    startX?: number
    startY?: number
    startWidth?: IStyleItem
    startHeight?: IStyleItem
    constructor(public elem: HTMLElement) {
        super(elem)
        this.on("mousedown", this.mouseHandler)
        this.on("mousemove", this.mouseHandler)
    }
    /**
     * 获取标签样式项
     * @param ele 标签
     * @param key 样式属性名
     * @returns 样式属性值
     */
    getStyle(ele: Element, key: keyof CSSStyleDeclaration) {
        const styles = document.defaultView?.getComputedStyle?.(ele)
        if (styles && typeof styles[key] === "string") return parseInt(styles[key] as string, 10)
    }
    /**
     * 鼠标事件处理函数，用于处理鼠标按下和移动事件。当鼠标按下时，记录起始位置和当前宽度、高度的值。当鼠标移动时，根据鼠标位置的变化计算新的宽度和高度，并更新元素的样式。
     * @param e 
     */
    mouseHandler = (e: Partial<MouseEvent>) => {
        const { type, clientX = 0, clientY = 0 } = e
        if (type === "mousedown") {
            this.startX = clientX;
            this.startY = clientY;
            this.startWidth = this.getStyle(this.elem, "width")
            this.startHeight = this.getStyle(this.elem, "height")
        } else if (type === "mousemove") {
            const width = <number>this.startWidth + (clientX - <number>this.startX);
            const height = <number>this.startHeight + (clientY - <number>this.startY);
            this.elem.style.width = width + 'px';
            this.elem.style.height = height + 'px';
        }
    }
}

最终效果

最后我们在HTML中使用上述的所有功能，演示一下全部功能

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
 
        #menu {
            z-index: 2;
            position: fixed;
            width: 100px;
            min-height: 40px;
            background: lightcoral;
        }
 
        #menu li {
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
 
        #menu li:hover {
            background: lightblue;
        }
 
        .custom-box {
            line-height: 100px;
            text-align: center;
            width: 100px;
            height: 100px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            background: lightgreen;
            position: fixed;
            cursor: move;
        }
 
        .select {
            z-index: 1;
            border: 3px solid black;
        }
    </style>
</head>
 
<body>
    <script type="module">
        import { Menu, CustomElement, Drag, Resize } from "./index.js"
        // 初始化标签
        const elem = new CustomElement()
        // 初始化菜单功能
        const menu = new Menu([
            {
                label: "新建", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.add(e)
                }
            }, {
                label: "复制", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.cloneNode(e)
                }
            }, {
                label: "删除", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.removeEle()
                }
            }, {
                label: "调整位置", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.selectEle && (elem.selectEle.__drag = new Drag(elem.selectEle))
                }
            }, {
                label: "调整大小", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.selectEle && (elem.selectEle.__resize = new Resize(elem.selectEle))
                }
            }, {
                label: "取消拖拽", handler: (e) => {
                    menu.remove(menu.menu)
                    elem.selectEle?.__drag?.reset?.()
                    elem.selectEle?.__resize?.reset?.()
                }
            },
            {
                label: "关闭", handler: (e) => {
                    menu.remove(menu.menu)
                }
            }
        ])
 
    </script>
</body>
 
</html>

总结

当涉及到自定义菜单时，JavaScript提供了丰富的功能和API，让我们能够创建具有定制化选项和交互性的菜单。文章主要介绍了前端自定义菜单的实现过程，描述了创建标签、选中标签、复制标签、删除标签、拖拽位置及大小等功能。

以上就是文章全部内容了，感谢你看到了最后，如果觉得不错的话，请给个三连支持一下吧，谢谢！

文章标签：
JavaScript
前端开发
API
关键词：
JavaScript浏览器
js浏览器
浏览器js
JavaScript案例
浏览器案例
DieHunter1024
目录
相关文章
游客qeoynko2nmbgk
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常
游客qeoynko2nmbgk
40 0
技能实验室
|
11天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式：`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求，返回Promise对象，可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果，适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
技能实验室
33 5
在浏览器执行js脚本的两种方式
想飞的雪糕
|
8天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
想飞的雪糕
25 1
mao29955
|
15天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具，可以较为准确地检测 JavaScript 中的内存泄漏问题，并帮助我们找出潜在的泄漏点，以便采取相应的解决措施。
mao29955
103 9
想飞的雪糕
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门：Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术，你是否想过在浏览器中运行大模型？Xenova团队推出的Transformer.js，基于JavaScript，让开发者能在浏览器中本地加载和执行预训练模型，无需依赖服务器。该库利用WebAssembly和WebGPU技术，大幅提升性能，尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成，Transformer.js都提供了强大支持，成为构建浏览器AI应用的核心工具。
想飞的雪糕
396 1
cqtianxin1
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
cqtianxin1
21 2
邹荣乐
|
28天前
|
JavaScript API
深入解析JS中的visibilitychange事件：监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件：监听浏览器标签间切换的利器
邹荣乐
79 0
游客j4mujezz7vm7y
|
2月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
游客j4mujezz7vm7y
55 2
神明木佑
|
1月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
神明木佑
17 0
神明木佑
|
1月前
|
存储 JavaScript 前端开发
JavaScript 与浏览器存储
JavaScript 与浏览器存储
神明木佑
30 0

热门文章

最新文章

  • 1
    [教程]谷歌浏览器只能安装在C盘，教大家如何设置才能装在D盘
  • 2
    如何在chrome上开启WebGL功能和判断目前浏览器是否支持
  • 3
    IE浏览器无法上网设置
  • 4
    python获取浏览器localstorage与sessionstorage数据
  • 5
    15 个可在 Chrome 浏览器上体验 WebGL 的例子
  • 6
    浏览器是如何展示网页的
  • 7
    剖析IE浏览器子系统的性能权重，互联网营销
  • 8
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 9
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 10
    制作一个简单的WPF图片浏览器
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    260
  • 3
    js【详解】arr.reduce() 数组缩减
    45
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    98
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    408
  • 6
    JavaScript进阶-JavaScript库与框架简介
    57
  • 7
    DVWA JavaScript 通关解析
    66
  • 8
    WEB三大主流框架之Vue.js
    44
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    59
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    215

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • 基于浏览器的实时构建探索之路
  • JavaScript 语言在引擎级别的执行过程
  • 基于浏览器的实时构建探索之路--玄寂

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云OSS设置跨域访问