【前端丨学习笔记】js实现鼠标右键删除修改内容

Amy · 发表于 2018-12-31 22:18:32

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

一般在写PC端的聊天对话框中，会遇到右键删除聊天列表。可用以下方法实现，实例：

[HTML] 纯文本查看 复制代码

<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content=" " />
    <meta name="copyright" content="来自 和派孔明——高级前端工程师" />
    <title>苏飞论坛</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ul1 li {
            width: 200px;
            background: #e7e7e7;
            border: 1px solid #bcbcbc;
            margin: 10px;
            float: left;
            line-height: 50px;
            text-align: center;
        }
        #menu {
            width: 150px;
            border: 1px solid #bcbcbc;
            border: 1px solid #bcbcbc;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            background: white;
        }

        #menu li {
            padding: 3px;
        }

        #menu li:hover {
            background: #e7e7e7;
        }
    </style>
    <script>
        window.onload = function () {
            var oM = document.getElementById('menu');
            var aLi = oM.children;
            var oUl = document.getElementById('ul1');
            var aLi1 = oUl.children;
            var _this = null;

            for (var i = 0; i < aLi1.length; i++) {
                aLi1[i].oncontextmenu = function (ev) {
                    _this = this;
                    var oEvt = ev || event;
                    oM.style.display = 'block';
                    oM.style.left = oEvt.clientX + 'px';
                    oM.style.top = oEvt.clientY + 'px';
                    return false;
                }
            }
            aLi[0].onclick = function () {
                oUl.removeChild(_this);
            }
            aLi[1].onclick = function () {
                _this.style.background = 'red';
            }
            aLi[2].onclick = function () {
                _this.style.background = 'green';
            }
            aLi[3].onclick = function () {
                _this.style.background = 'yellow';
            }
            aLi[4].onclick = function () {
                _this.style.background = 'blue';
            }
            document.onclick = function () {
                oM.style.display = 'none';
            };
        };
    </script>
</head>
<body>
    <ul id="menu">
        <li>删除</li>
        <li>变成红色</li>
        <li>变成绿色</li>
        <li>变成黄色</li>
        <li>变成蓝色</li>
    </ul>
    <ul id="ul1">
        <li>分布式系统框架</li>
        <li>HttpHelper万能框架</li>
        <li>HttpHelper爬虫类</li>
        <li>开发助手</li>
        <li>C#基类库</li>
    </ul>
</body>
</html>

效果如图：

点击右键显示：

选择“变成红色”之后的效果

范范 · 发表于 2018-12-31 22:36:10

我只是路过打酱油的。

竹林风 · 发表于 2019-1-1 18:32:11

看到这帖子真是高兴！

		自动登录	找回密码
密码			马上注册

[零基础学习web前端] 【前端丨学习笔记】js实现鼠标右键删除修改内容

相关帖子