右键弹出菜单（oncontextmenu）

秒速五厘米 2022-06-17 11:49 229阅读 0赞

oncontextmenu：右键触发事件

onclick:左键触发事件

例子：

\---------------CSS

**\#colorList**\{

width: 100px;
        position: absolute;
    }
    ul#colorList li {
        border: 1px solid #ddd;
        cursor: pointer;
        padding: 6px;
    }
    ul#colorList li:hover {
        background: #EFCEE7;
        color: #fff;
    }

-------------HTML

<ul id="colorList">
        <li color="red">设为红色</li>
        <li color="blue">设为蓝色</li>
        <li color="green">设为绿色</li>
    </ul> -----------JS //右键可以设置颜色 $("#offerTextTable").on("contextmenu",".editorAble input",function (e) {
        var that=$(this);
        $("#colorList").css({
            "display":"block",
            "top":that.offset().top-100,
            "left":that.offset().left-150
        });
        that.attr("status","active");
        if(e.preventDefault()){
            e.preventDefault()
        }
    });
    $("#colorList li").click(function () {
        var that=$(this);
        var thatColor=that.attr("color");
        $("#offerTextTable").find("input[status='active']").css("color",thatColor);
        $("#offerTextTable").find("input[status='active']").removeAttr("status");
        $("#colorList").css({
            "display":"none" });
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 pyside、pyqt 右键菜单弹出多次的Bug

目录一、现象：右键菜单，多次点击才能关闭二、原因三、解决办法：将数据渲染与菜单绑定分开。 -------------------- 一、现象：右键菜单，

墨蓝/ 2024年03月26日 18:41/ 0 赞/ 24 阅读

相关 qtableview 右键菜单弹出及获取数据

connect(tableView, SIGNAL(customContextMenuRequested(const QPoint &)), this,SLOT(slot\_t

比眉伴天荒/ 2023年08月17日 17:00/ 0 赞/ 77 阅读

相关右键菜单

.h: afx\_msg void OnContextMenu(CWnd\ pWnd, CPoint point); afx\_msg void OnCopy();

青旅半醒/ 2022年08月27日 03:38/ 0 赞/ 283 阅读

相关 DirectUI界面编程（六）实现右键弹出菜单

本节向大家介绍一下右键弹出菜单是如何实现的。效果如下，在窗口中点击鼠标右键弹出菜单，点击菜单项能够响应菜单点击事件。 ![这里写图片描述][2015080111521375

向右看齐/ 2022年08月03日 05:14/ 0 赞/ 291 阅读

相关右键弹出菜单（oncontextmenu）

oncontextmenu：右键触发事件 onclick:左键触发事件例子： \---------------CSS \colorList\{ width

秒速五厘米/ 2022年06月17日 11:49/ 0 赞/ 230 阅读

相关 Html之防止内容选中、阻止右键菜单弹出代码

防止内容选中  <script type="text/javascript"> // IE E

男娘i/ 2022年05月15日 03:48/ 0 赞/ 209 阅读

相关自定义浏览器右键弹出小菜单

开发工具与关键技术： VS ，自定义浏览器右键弹出小菜单；作者：刘佳明撰写时间：2019年 6 月 15 日本次小编要分享的知识内容是如何自定义浏览器右键弹出

今天药忘吃喽~/ 2022年01月16日 08:11/ 0 赞/ 376 阅读

相关 ARCGISEngine中右键弹出菜单栏

IToolbarMenu mapPopMenu = null; mapPopMenu = new ToolbarMenu();//这个很

野性酷女/ 2021年09月16日 13:12/ 0 赞/ 472 阅读

相关 electron 类似右键的弹出菜单

1、引入主进程:const {Menu,MenuItem}=require('electron'); 渲染进程:const {Menu,MenuI

「爱情、让人受尽委屈。」/ 2021年07月24日 22:27/ 0 赞/ 506 阅读

相关 electron 右键弹出菜单

1、监听右键,回调中弹出 window.addEventListener('contextmenu',回调); 代码示例: const { net

不念不忘少年蓝@/ 2021年07月24日 17:08/ 0 赞/ 629 阅读