1

右クリックして表示されるコンテキストメニューを実装しようとしてcontextFolderいますz-index: 1000。

そのために、JQueryを使用してcontextmenuイベントをdivにバインドします。これは正常に機能しています。このコンテキストメニューを非表示にしたい

  • ユーザーが画面上の任意の場所を左クリックすると、
  • ユーザーは、他の場所を除いて、画面上の任意の場所を右クリックしますdiv.contextfFolder

コンテキストメニューが開いていて、他のコンテキストメニューで右クリックが発生した場合div.contextFolder、現在のコンテキストメニューを非表示にして、新しいコンテキストメニューを開きdiv.contextFolderます。

コンテキストメニューに表示するときにそれを行うには、

  • また、、、、およびでheight: 100%オーバーレイを作成します。width: 100%z-index: 100
  • 左クリックイベントをこのオーバーレイにバインドして、クリックしたときに、
    • オーバーレイが削除され、
    • コンテキストメニューは非表示になっています。
  • また、コンテキストメニューをバインドしてコンテキストメニューを非表示にし、右クリックして別のポイント以外のポイントにoverlay移動すると削除しますoverlaydiv.contextFolder
  • コンテキストメニューのオーバーレイの左クリックイベントを防ぐために、コンテキストメニューにも割り当てz-index: 101ます。（オーバーレイのz-indexは100です）

これは私にはすべて問題ないようです（私はCSSの初心者なので、非常に明白な何かが欠けている可能性があります）。

div.contextFolder別のコンテキストメニューがすでに開いているときに右クリックした場合を除いて、すべて正常に機能していdiv.contextFolderます。オーバーレイのコンテキストメニューイベントに移動します（現在のイベントに非表示になります）。新しいものを開けて欲しいです。

ChromeとFirefoxの最新バージョンでこれをテストしました。

これはフィドルです。

ありがとうございました。

4

2 に答える 2

1 
 bind('contextmenu' , function(e){
             $(".folderContextMenu").css( {position:"absolute", top:e.pageY, left: e.pageX, zIndex: '101'} );
                e.preventDefault();
                //alert('not working');
                return false;
            }

問題は、コンテキストメニューを再度移動しないことです。古い位置にとどまります。そのため、バインド関数を少し変更しました。ただし、オーバーレイを使用していて、バインド関数を適用すると、メニューがどこにでも表示されます。これが2番目の問題です。

これが完全な変更されたJSFiddleです

編集：私はウィンドウのonclickメソッドを使用しました、ここを見てください、そしてここにメニューがリバウンドされているという証拠があります。

于 2012-07-15T13:13:45.397 に答える
1

私はあなたのためにフィドルを作成しました。私がしたのはあなたのJavaScriptを作り直すことだけでした。

JSFiddle

それがあなたを助けることを願っています。

PS：メニューを最初に開いた後のクリックが、メニューの子のクリックであるかどうかを確認する他のコードも追加しました

乾杯

于 2012-07-15T13:38:48.683 に答える