在鼠標點擊的位置 ，添加一個div ,類似手表右鍵菜單

jopen 9年前發布 | 3K 次閱讀 JavaScript 

<!DOCTYPE html>
<html>



<head>
    <meta charset="utf-8">
    <title> New Document </title>
    <script src="styles/default/js/jquery-2.1.0.min.js"></script>
</head>
<style type="text/css">
    .modle {
        width: 100px;
        cursor: pointer;
        text-align: center;
    }
    #popmenu {
        display: none;
        position: absolute;
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-left: 10px;
        border: 1px solid black;
        background-color: white
    }
</style>

<body>
    <div class="modle">
        click me
    </div>
    <div id="popmenu">
        內容
    </div>
</body>
<script type="text/javascript">
    var menu = document.getElementById("popmenu");
    $(".modle").click(function(event) {
        e = event ? event : window.event;
        t = e.target || e.srcElement;
        menu.style.left = getPointerX(e) + "px";
        menu.style.top = getPointerY(e) + "px";
        menu.style.display = "block";
    });

    function getPointerX(event) {
        return event.pageX || (event.clientX + (document.documentElement.scrollLeft                                 || document.body.scrollLeft));
    }

    function getPointerY(event) {
        return event.pageY || (event.clientY + (document.documentElement.scrollTop
                || document.body.scrollTop));
    }
</script>




</html></pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！