コンテナをクリックしたときにカーソル位置にのみ表示されるコンテキストメニューを作成するにはどうすればよいですか？

Question

以下のコードを使用して、コンテナdivをクリックしたときにのみ表示されるコンテキストメニューを設定しようとしました。しかし、私はかなりうんざりしています。ここが助けになるのはフィドルhttp://jsfiddle.net/PhilippB/SMKMW/1/です。

var container = document.getElementById("container"); 
var contextmenu = document.getElementById("contextmenu"); 

container.onclick = function() {contextmenu()} ; 
contextmenu.style.display = "none"; 

function contextmenu(event) { 
    if (contextmenu.style.display == "none") { 
     contextmenu.style.display = "block"; 
     contextmenu.style.left = event.pageX + "px"; 
     contextmenu.style.top = event.pageY + "px"; 
    } 
    else { 
     contextmenu.style.display = "none"; 
    } 
}​ 

Answer 1

あなたはいくつかの奇妙なことが起こっているので、あなたが何をしているのかは完全にわかりません。

• 「コンテキストメニュー」という2つの変数があります。最初はgetElementByIdを、第2はcontextmenu関数を定義するときです。
• あなたのJS Fiddleの例は上記の例と一致せず、IF文にエラーが含まれています（1 =では2ではありません）。実際、あなたのJSFiddleの例は上の例と非常に異なっています
• 例では、containerの中の唯一のコンテンツはcontextmenuですが、display: noneで開始するので、何を表示するかを知るのは難しいです。あなたはVariableとに1つのnameを定義するべきではありません

  contextmenu.style.display = "none"; 
  

  ：

は使っ引用してJSFiddle（http://jsfiddle.net/SMKMW/2/）

var container = document.getElementById("container"); 
var contextmenuElement = document.getElementById("contextmenu"); 

container.onclick = function() {contextmenu()} ; 
contextmenuElement.style.display = 'none'; 

function contextmenu(event) { 

    var container = document.getElementById("container"); 

    if (contextmenuElement.style.display == "block") { 
     contextmenuElement.style.display = "none"; 
    } 
    else { 
     contextmenuElement.style.display = "block"; 
    } 

} 

Answer 2

いくつかの問題：

• あなたは不要な機能であなたのクリックハンドラをラップしているように見えます。

  は使用してのonclickハンドラを定義してみてください。

  container.onclick = contextmenu; 
  

• あなたはもしました同じあなたのDOM要素にあなたのハンドラ関数とリファレンスの名前：contextmenu。それらの名前を変更します。

• お客様のの表示の比較が正しくない（代わりに割り当てです）。それは次のようになります。

  if (contextmenuElement.style.display == "block") { 
  

• コンテナスタイルのご初期割り当ては、文字列に値を設定しません。それは次のようになります。これらの変更を行った後、あなたはあなたのコンテナがクリック可能ではないことに気づくでしょう

  contextmenu.style.display = 'none'; 
  

。それはの目に見える内容がなく、幅または高さがではないからです。これらを設定するか、要素を非表示にするにはdisplayの代わりにCSS visibilityを使用します。

Here's an updated fiddle（私は明示的な高さ/幅のプロパティと何が起こっているかを見るためにコンテナに背景色を追加しました）。

Answer 3

あなたがラップする必要がある文字列値のこの更新されたバージョンをお試しくださいFunction：

var contextmenu // and function 
contextmenu() // throw syntax error; 

要素が隠されているときは、この要素をクリックすることはできません。関数を呼び出すための別の要素を作成し、隠し要素を表示する方がよいでしょう。