14.右键菜单

右键菜单,顾名思义,当鼠标右键时,弹出一个菜单,而且应该是鼠标在哪点,哪出现菜单才对,最后当鼠标点击别处时,菜单消失。这个效果需要我们掌握什么知识点呢?

  • ####常见事件 本例中着重用到oncontextmenu 当弹出右键菜单时发生
  • ####鼠标距离左面的距离e.clientX ,而且这个值是不带单位的,如果定位的话,一定要加上字符串拼接 + “px”
  • ####浏览器默认情况下,右键也会弹出菜单,所以,要知道阻止浏览器默认行为的语句 return false;
  • ####e的兼容性,e= e|| window.event;
    image.png

image.png

var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(){
        oUl1.style.display = "block";
        return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
    }
但此时位置不对,应该是鼠标点哪,哪出现菜单,给ul绝对定位,不能是relative,因为relative空间不释放,我们必须要求他释放空间,脱离文档流才行
<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";
         return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
    }
</script>
差点忘了e的兼容性

image.png

<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        e = e || window.event;
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";

        return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
    }
此时应该考虑,当菜单栏出现后,鼠标按别的地方,菜单栏应该消失
<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        e = e || window.event;
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";
      return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
    }
    document.onclick = function(){
        oUl1.style.display = "none";
    }
</script>
到此为止,基本的右键菜单就完成了,如果你还想加点啥,譬如说,点击菜单中每个选项的时候,弹出每个选项的内容

image.png
image.png
image.png

所以用this

image.png

so.加了输出每项内容的右键菜单栏的全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style : none;
        }
        #ul1{
            width: 100px;
            border: 1px solid #ff0000;
            border-radius:5px;
            padding: 5px 0;
            display: none;
            position:absolute;
        }
        #ul1 li{
            height: 24px;
            line-height:24px;
            text-align:center;
            color:#555;
            font-size:12px;
        }
        #ul1 li:hover{
            background: #00ff00;
        }
    </style>
</head>
<body>
<ul id="ul1">

    <li>二哈</li>
    <li>金毛</li>
    <li>泰迪</li>
    <li>萨摩</li>
</ul>
<script>
    var oUl1 = document.getElementById("ul1");
    document.oncontextmenu = function(e){
        e = e || window.event;
        oUl1.style.display = "block";
        oUl1.style.left = e.clientX +"px";
        oUl1.style.top = e.clientY + "px";
        return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
    }
    document.onclick = function(){
        oUl1.style.display = "none";
    }
    var aLi = oUl1.getElementsByTagName("li");
    for(var i=0; i< aLi.length;i++){
        aLi[i].onclick = function(){
            console.log(this.innerHTML);
        }
    }

</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值