コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript マウスの右クリック メニュー カスタム効果_JavaScript スキル

WBOY
リリース： 2016-05-16 15:16:27
オリジナル
1177 人が閲覧しました

この記事の例では、JavaScript のマウスの右クリック メニューの実装方法を説明し、参考のために皆さんと共有します。

レンダリング:

特定のコード: 

<html>
  <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
      #menu{
        border:solid 1px gray;
        width:100px;
        display:none;
        position:absolute;
        background-color:ghostwhite;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #menu>li{
        border-bottom: dashed 1px gray;
      }
    </style>
    <script type="text/javascript">
    window.onload=function(){
      var oUl=document.getElementById('menu');
        document.oncontextmenu=function(ev){
          var oEvent=ev||event;
          //一定要加px，要不然chrom不认
          oUl.style.top=oEvent.clientY+'px';
          oUl.style.left=oEvent.clientX+'px';
          oUl.style.display='block';
          return false;
        }
        document.onclick=function(){
          oUl.style.display='none';
        }
    };
    </script>
  </head>
  <body>
<ul id="menu">
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
</ul>
  </body>
</html>
ログイン後にコピー

この記事が、JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

関連ラベル：
javascript鼠标右键菜单 javascript右键菜单
ソース：php.cn
前の記事：ファイルアップロードとダウンロードのWebwork実装コード詳細解説_JavaScriptスキル 次の記事：JSP および JS ファイルの編集時に Eclipse が停止する場合の解決策のまとめ_JavaScript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
特定のメニュー項目にマウスオーバーしても、非表示のサブメニューが表示されない メニュー項目を呼び出すことができるように、メニュー項目用にいくつかのクラスを作成しました。 .dropdownBox{display:none;}.dropdownli:hover...
から 2024-04-04 14:39:08
0
1
359
マウスオーバーイベントを使用してフライアウトメニューを表示する ポップアップ メニューがあり、マウスオーバー イベントを使用して切り替えようとしていますが、期待どおりに動作していないようです。 div を .hero-list-blocka:h...
から 2024-04-03 15:14:43
0
1
416
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート