【Javascript】入門之右鍵模擬選單

阿新 • • 發佈：2020-12-09

技術標籤：程式碼例項 js互動設計 javascript html

描述：列表項隨著滑鼠右鍵的位置移動, 類似於模擬選單

在這裡插入圖片描述

程式碼實現:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右鍵模擬選單</ 
title>
    <style>
        *{
            margin: 0;
            /* padding: 0; */
        }
        ul{
            border: 1px solid #000;
            width: 150px;
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        < 
li>CSS</li>
        <li>JS</li>
        <li>JQuery</li>
    </ul>
    <script>
        // 右鍵, 讓ul顯示出來
        var ul = document.querySelector('ul');
        document.oncontextmenu = function(evs){
            ul.style.display = 'block';
            // 讓ul跟隨滑鼠移動
            // 獲取滑鼠的位置 

            var ev = window.event || evs;
            console.log(ev.clientY, ev.clientX);

            // 設定margin
            ul.style.marginLeft = ev.clientX + 'px';
            ul.style.marginTop = ev.clientY + 'px';

            // 阻止預設事件
            return false;
        }

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

【Javascript】入門之右鍵模擬選單

技術標籤：程式碼例項js互動設計javascripthtml 描述：列表項隨著滑鼠右鍵的位置移動, 類似於模擬選單

【Javascript】入門之模擬單選框

技術標籤：程式碼例項js互動設計javascripthtml 描述: 點選每一個li 將li的內容賦值給 div 給當前點選的li加上背景色, 點選空白部分隱藏

【Javascript】進階之localStorage在登入註冊中的應用

技術標籤：程式碼例項js互動設計javascript 描述 1. 進入首頁, 判斷本地快取的手機號和密碼是否都存在, 如果都存在顯示已經登入和顯示個人中心; 如果其中有一項不存在則狀態為未登入, 顯示登入註冊按鈕。

【JavaScript】原生js中DOM操作之元素建立、插入和移除

技術標籤：JS例項javascriptjs 建立元素 <body> <input type="text" id="txt1">

【Pandas】入門案例

1 # To add a new cell, type \'# %%\' 2 # To add a new markdown cell, type \'# %% [markdown]\' 3 # %%

【JavaScript】條件語句

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 條件判斷語句

【JavaScript】函式—可重用的程式碼塊

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念在JavaScript中另一個基本概念是函式, 它允許你在一個程式碼塊中儲存一段用於處理單任務的程式碼，

【JavaScript】函式返回值

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念返回值意如其名，是指函式執行完畢後返回的值。

【JavaScript】照片庫

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 html 模板

【JavaScript】物件基礎

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念物件是一個包含相關資料和方法的集合（通常由一些變數和函式組成，我們稱之為物件裡面的屬性和方法）。

【JavaScript】物件繼承

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概念到目前為止我們已經瞭解了一些關於原型鏈的實現方式以及成員變數是如何通過它來實現繼承，

【JavaScript】物件構建實踐

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 概述本文通過編寫一個彈球 demo 來展示 JavaScript 中物件的重要性。

【JavaScript】猜數字遊戲

以下內容為學習記錄，可以參考 MDN 原文。環境 vscode 1.46 Microsoft Edge 83 示例以下內容為了解和熟悉 JavaScript，不需要理解，能夠複製貼上並正確執行即可。

【JavaScript】基本型別

以下內容為學習記錄，可以參考 MDN 原文。環境 node v12.18.1 npm 6.14.5 vscode 1.46 Microsoft Edge 83

【JavaScript】標準內建變數 globalThis

以下內容為學習記錄，可以參考 MDN 原文。環境 node v12.18.1 npm 6.14.5 vscode 1.46 Microsoft Edge 83

【JavaScript】標準內建函式 eval

以下內容為學習記錄，可以參考 MDN 原文。環境 node v12.18.1 npm 6.14.5 vscode 1.46 Microsoft Edge 83

【JavaScript】標準內建函式 parseInt

以下內容為學習記錄，可以參考 MDN 原文。環境 node v12.18.1 npm 6.14.5 vscode 1.46 Microsoft Edge 83

【轉】JSON 之 SuperObject: 增、刪、改

unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls;

【javascript】函式中的this的四種繫結形式 — 大家準備好瓜子，我要講故事啦~~

目錄 this的預設繫結 this的隱式繫結隱式繫結下，作為物件屬性的函式，對於物件來說是獨立的

【JavaScript】Object 靜態方法（二）

以下內容為學習記錄，可以參考 MDN 原文。環境 node v12.18.1 npm 6.14.5 vscode 1.46 Microsoft Edge 83