会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义右键菜单</title>
    <style>
        *{margin: 0;padding: 0}
      ul{
          list-style: none;
          width: 190px;
          height: 125px;
          background-color: darkgrey;
          position: absolute;
          display: none;
      }
        ul li{
            border: 1px solid skyblue;
            padding: 4px;
            cursor: pointer;
            transition: 0.5s;
        }
        ul li:hover{
            background-color: skyblue;
            color: #fff;
        }
    </style>
</head>
<body>

<ul>
    <li>我想尚学堂了!</li>
    <li>您真要离开此页面吗?</li>
    <li>去百度搜索页面中的内容</li>
    <li>输入内容后去百度搜索</li>
</ul>
<textarea cols="80" rows="20"></textarea>
<input type="text">
<script>
    let ul=document.querySelector('ul');
    //禁用系统的右键
    document.oncontextmenu=function (eve) {
        return false; //return false 表示禁用事件
    };
    //鼠标抬起出现鼠标右键菜单
    document.onmouseup=function (eve) {
        //eve.button 判断鼠标点的是那个按键
        if (eve.button==2){
            ul.style.display='inline-block';
            //设置鼠标的位置
            ul.style.left=eve.clientX+'px';
            ul.style.top=eve.clientY+'px';
        }else {
            ul.style.display='none';
        }

    }
    //点击某一个菜单选项时触发的事件(事件委托)
    ul.onmousedown=function (eve) {
        if (eve.target.innerHTML=='我想尚学堂了!'){
            alert('那就去吧!');
        }else if (eve.target.innerHTML=='您真要离开此页面吗?'){
            if (confirm('您真要离开此页面吗?')){
                window.close();
            }
        }else if (eve.target.innerHTML=='去百度搜索页面中的内容'){
            let result = document.getSelection().toString();
            open('https://www.baidu.com/s?wd='+result);
        }else {eve.target.innerHTML=='输入内容后去百度搜索'}{
            let value = document.querySelector('input').value;
            open('https://www.baidu.com/s?wd='+value);
        }
    }


</script>
</body>
</html>

image.png

怎么会取不到input框的值,去百度搜索呢,老师

WEB前端全系列/第二阶段:JavaScript编程模块/面向对象编程 408楼
WEB前端全系列/第二阶段:JavaScript编程模块/正则对象 410楼
WEB前端全系列/第二阶段:JavaScript编程模块/DOM模型 411楼
WEB前端全系列/第二阶段:JavaScript编程模块/正则对象 412楼
WEB前端全系列/第二阶段:JavaScript编程模块/面向对象编程 417楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637