0

以下のコードを使用して、コンテナ 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";
    }
}​
4

3 に答える 3

1

引用符を使用して文字列値をラップする必要があります。

contextmenu.style.display = "none";

nameaVariableおよび aに対して定義しないでくださいFunction。

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

これとは別に、要素が非表示の場合、その要素をクリックすることはできません。関数を呼び出すための別の要素を作成し、非表示の要素を表示することをお勧めします。

于 2012-04-30T19:55:27.960 に答える
1

あなたはいくつかの奇妙なことが起こっているので、あなたが何を求めているのかは私には完全には明らかではありません.

  • 「contextmenu」という名前の 2 つの異なる変数があります。1 つ目は を実行するgetElementByIdとき、2 つ目は関数を定義するときですcontextmenu。
  • JS Fiddle の例は上記の例と一致せず、IF ステートメントにエラーが含まれています ( =2 ではなく 1 のみを使用します)。実際、あなたの JSFiddle の例は上記の例とは大きく異なります
  • あなたの例では、内部の唯一のコンテンツcontainerは ですがcontextmenu、 で開始する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";
    }

}
于 2012-04-30T19:52:02.880 に答える
1

いくつかの問題:

  • クリック ハンドラーを不要な関数でラップしているようです。

    以下を使用して onclick ハンドラーを定義してみてください。

    container.onclick = contextmenu;

  • また、ハンドラー関数と DOM 要素への参照に同じ:という名前を付けましたcontextmenu。それらのいずれかの名前を変更します。

  • 表示の比較は正しくありません(代わりに割り当てです)。そのはず：

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

  • コンテナー スタイルの最初の割り当てでは、値が string に設定されません。そのはず：

    contextmenu.style.display = 'none';

これらの変更を行った後、コンテナーをクリックできないことがわかります。これは、目に見えるコンテンツがなく、 width や height がないためです。それらを設定するか、要素を非表示/表示するvisibility代わりにCSS を使用することができます。display

これが機能する更新されたフィドルです（コンテナに明示的な高さ/幅のプロパティと背景色を追加して、何が起こっているかを確認しました）。

于 2012-04-30T19:48:02.990 に答える