自定义oncontextmenu

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

*{margin:;padding:;list-style:none;}

#menu1{display:none; position:absolute;left:;top:;width:100px; border:1px solid #; overflow:hidden;}

#menu1 li{width:%; height:30px; line-height:30px; text-align:center; background:#ccc; border-bottom:1px solid #;}

#menu1 li:hover{ background:#c00; color:#fff;}

#ul1 li{float:left;width:200px; height:30px; line-height:30px; text-align:center; background:#ccc; border:1px solid #; margin:10px;}

</style>

<script>

window.onload = function(){

    var oUlMenu = document.getElementById("menu1");

    var aMLi = oUlMenu.children;

    var oUl = document.getElementById("ul1");

    var aLi = oUl.children;

    var currentLi = null;

    for(var i = ; i < aLi.length; i++){

        aLi[i].oncontextmenu = function(ev){

            currentLi = this;

            var oEvent = ev || event;

            oUlMenu.style.display = "block";

            oUlMenu.style.left = oEvent.clientX + "px";

            oUlMenu.style.top = oEvent.clientY + "px"

            return false;//禁止默认的鼠标右击出现选项弹窗，和oncontextmenu配合使用

        };

    }

    aMLi[].onclick = function(){

        currentLi.parentNode.removeChild(currentLi);

        oUlMenu.style.display = "none";

    };

    aMLi[].onclick = function(){

        currentLi.style.background = "red";

        oUlMenu.style.display = "none";

    };

    aMLi[].onclick = function(){

        currentLi.style.background = "green";

        oUlMenu.style.display = "none";

    };

};

</script>

</head>

<body>

<ul id="menu1">

    <li>删除</li>

    <li>变红</li>

    <li>变绿</li>

</ul>

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>
巴特西

自定义oncontextmenu

最新文章

热门文章
