3

ステージをクリックすると、キネティック js のコンテキスト メニューを無効にする必要があります。event.preventDefault()、cancelbubble、のようなすべてを試しましevent.stopPropagation() return falseたが、何も機能しません..

これはjsfiddleの例です。デフォルトのコンテキストメニューが表示されないようにするには、ワットの変更を行う必要があります

stage.on('click',stageClicked,true);
function stageClicked(event){
   if(event.button==2){
       event.cancelBubble = true;
       event.preventDefault();
           event.stopPropagation();

       return false;
   }
}

http://jsfiddle.net/xPbgf/

4

2 に答える 2

3

上記の回答では、コンテキスト メニューが削除されますが、@ user2045685 がevent.targetNode右クリックで選択することはできません。

@ user2045685 はコメントで、getAllIntersectionメソッドを使用して回避策を見つけたと述べていますが、その方法は意図したものではないため、その代替手段を使用しないことをお勧めします。メソッドのパフォーマンスgetAllIntersectionは非常に低くevent.targetNode、使用は問題なく機能します。

getAllIntersections(pos)

点と交差するすべての形状を取得します。注: このメソッドは一時キャンバスをクリアし、コンテナー内のすべての形状を再描画する必要があるため、パフォーマンスが非常に低いため、特別な状況でのみ使用する必要があります。可能な限り Kinetic.Stage#getIntersection メソッドを使用してください。パフォーマンスが大幅に向上します。

ソース: Kinetic.Container#getAllIntersections

代わりに、イベント リスナーをバインドしてdiv#container呼び出しevent.preventDefault()、コンテキスト メニューを無効にすることができます。

document.getElementById("container").addEventListener('contextmenu', function (event) {
  event.preventDefault();
});

また、レイヤーがクリックを検出できるように、ステージの幅と高さを持つ「背景の四角形」を追加する必要があります。そのため、上記の@Brandon Booneの回答で、「onは何もしていないようだ」と述べています。舞台のために。KineticJS は、ノードがイベントをリッスンすることを想定しているため、「透明な背景」を追加しない場合stage.on("click")、緑色の四角形を右クリックしたときにのみ起動します (ただし、ステージの残りの部分は起動しません)。

var bg = new Kinetic.Rect({
  width: stage.getWidth(),
  height: stage.getHeight()
});

// add bg first as your transparent background
layer.add(bg);
// add the shape to the layer
layer.add(rect);

これで、関数を問題なく使用して、関数内stage.on('click', stgClicked)で呼び出すことができます。event.targetNodestgClicked

function stgClicked(event) {
  if (event.button == 2) {
     alert('rightclick');
     var node = event.targetNode;
     console.log(node);
  }
}

JSフィドル

于 2013-07-23T14:34:17.860 に答える
2

ステージオブジェクト内でキャンバス参照を見つけて、contextmenuイベントを直接アタッチする必要があるように見えます。これを渡してonも何も起こらないようです。

これを試して：

Live Demo

var canvas = stage.content.childNodes[0]; 
if (canvas.addEventListener) {
    canvas.addEventListener('contextmenu', stgClicked, false); 
} else if (canvas.attachEvent)  {
    canvas.attachEvent('oncontextmenu', stgClicked);
}

targetNode が必要な場合は、ネイティブの JavaScript イベント内で確認してください。

function stgClicked(event){
    var targetNode;
    if (event.srcElement)  targetNode = event.srcElement;
    else if (event.target) targetNode = event.target;

    alert(targetNode.nodeName);
}
于 2013-07-23T01:58:19.803 に答える