6

誰も私に何か指針を与えることができる前に、これに出くわすことはありませんか?

ホワイトボードにメモを投稿するようなメモを作成するための Web アプリを作成しています。現時点では、スポーン ボタンはノートを生成しますが、ユーザーがキャンバス (ホワイトボード) の任意の場所をクリックできるようにしたいと思います。その位置に新しいノートが生成されます。

そのためのコードは次のとおりです。

$("#canvas").bind('click', function(e){

// Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

$("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show();
    $("#note" + noteID).children(".title").text("Note " + noteID);
        $("#note" + noteID).css({left:x, top:y, "z-index" : zindex});

    noteID++;
    zindex++;

e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();

});

ユーザーがメモの 1 つをクリックすると問題が発生します。これは、ユーザーがメモをクリックして別のメモを作成するたびに、メモがキャンバスに複製されるためです。この動作を停止し、ユーザーが空白のキャンバス領域をクリックしたときにのみメモを作成したいと考えています。preventDefauly、stopPropagation、stopImmediate を試しましたが、どれも影響を与えていないようです。

ノートクリックなどの他のアクションでも試してみましたが、適切な場所に適切なものを取得できないようです? それとも私はこれを完全に間違った方法で行っていますか?

ここに例：

http://www.kryptonite-dove.com/sandbox/animate

アップデート：

$('#canvas').on('click', '.note', function(e) {
    e.stopPropagation();
});

これにより、ノートが泡立つ問題は解決しましたが、ノート クラスでのクリック操作ができなくなりました。私は未知の海域にいます! メモのタイトルとテキストに対してクリックアクションを元に戻す方法についての指針をいただければ幸いです:)

4

5 に答える 5

12

#canvas をクリックして何かを実行したいが、クリックが #canvas で直接行われ、その子では行われない場合にのみ、次の 2 つの主なオプションを使用できます。

  1. 更新ごとに、各子のクリックを処理し、#canvas への伝播を停止できますが、もちろん、子に対して実行する他の処理が複雑になります。

  2. event.targetプロパティをテストして、イベントを開始した DOM 要素が #canvas 要素であるかどうかを確認します。

したがって、(当面の問題とは無関係に) 同じ要素を再選択するのではなく、jQuery メソッドをチェーンすることができ、チェーンする必要があることにも注意してください。

$("#canvas").bind('click', function(e){

   // if the clicked element wasn't #canvas return immediately
   if (e.target != this)
      return;

   // Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

   $("#note").clone().insertBefore("#insertAfter")
                     .attr("id", "note" + noteID)
                     .css({left:x, top:y, "z-index" : zindex})
                     .show()
                     .children(".title").text("Note " + noteID);

   noteID++;  
   zindex++;

   // You may not need any of the following any more (depending on
   // what your other requirements are)
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();

});

これがデモです（JSの大幅に削減されたバージョンで、基本的にこの回答とスタイルの機能のみです）：http://jsfiddle.net/H6XrW/

(前者が暗黙的に後者を呼び出すため、両方を呼び出す必要はないことに注意してください。).stopImmediatePropagation().stopPropagation()

于 2012-03-24T02:20:59.047 に答える
3

このコードは、メモをクリックして新しいメモを作成するのを防ぎます。

$("#canvas").bind('click', function(e){

// Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

    $("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show();
    $("#note" + noteID).children(".title").text("Note " + noteID);
    $("#note" + noteID).css({left:x, top:y, "z-index" : zindex});

    noteID++;
    zindex++;
});

$('#canvas').on('click', '.note', function(e) {
    e.stopPropagation();
});

ノートのクリックがキャンバス div に伝播するのを止めることで機能します。

于 2012-03-23T22:25:59.990 に答える
1

メモをクリックするときに伝播を停止して、#canvasその子の1つがクリックされたときに要素に通知されないようにする必要があります（私はそれ#insertAfterがの子であると想定しています#canvas）。新しいメモごとにクリックハンドラーをアタッチして、イベントがバブリングするのを防ぎます。

$("#note" + noteID).click(function (e) {
    e.stopPropagation();
});
于 2012-03-23T22:19:13.407 に答える
0

私は少しjquerynoobなので、これを行うためのより良い方法があるかもしれませんが、私は以下をテストしました、そしてそれは私のために働きます。もっと良いことができたら、他の人から話を聞いてみたいと思います。HTMLやCSSには触れませんでした。

// ----------------- BRING TO FRONT ------------------- 

$(".note").live("click", function (e) {
    console.log("Note click");
    $(this).css({"z-index" : zindex}); //Increment zindex
        zindex++;

    indexPos = $(this).css("zIndex"); // Get current z-index value
    e.stopPropagation();
});

// ----------------- CLONE NOTE ELEMENT -------------------


$(document).on("click", "#canvas, .clone", function(e){

    var left; 
    var top; 

    if ($(this).hasClass("clone")) {
        // If the button fired the click put the note at the top of the viewport
        console.log("Button click");
        left = 0 + noteOffset;
        top = 50 + noteOffset;
        noteOffset = noteOffset + 15;
    } else {
        // If the canvas fired the click put the note on the current mouse position
        console.log("Canvas click");
        left = e.pageX + "px";
        top = e.pageY + "px";
    }

    $("#note").clone().insertBefore("#insertAfter").attr("id", "note" + noteID).show()
        .children(".title").text("Note " + noteID).end().css({
            left: left, 
            top: top, 
            "z-index": zindex
        });

    noteID++;
    zindex++;

});


// ----------------- REMOVE NOTE ELEMENT -------------------

$(".close").live("click", function (e) {
    console.log("Close click");
    $(this).parent().remove();
    e.stopPropagation();
});
于 2012-03-24T01:03:33.620 に答える