44

HTML5とCanvasでお絵かきアプリを作っています。

ペイントや Photoshop のようなアプリケーションと同様のシステムが必要だと思います。プライマリ カラーとセカンダリ カラーを選択し、左クリックでプライマリ カラーをペイントし、右クリックでセカンダリ カラーでペイントできます。

ただし、マウスの右ボタンを離すと、ブラウザーのコンテキスト メニューが表示されます (画像の表示、画像の保存、すべての選択)。

これをエレガントに無効にすることはできますか? 可能であれば、一部のブラウザーでのみ機能するハックなソリューションにはなりたくありません。

ありがとう。

4

6 に答える 6

42

これを使用できます：

$('img').bind('contextmenu', function(e){
    return false;
});

この実例を参照してください。

最新の jQuery では:

$('body').on('contextmenu', 'img', function(e){ return false; });

注:body可能であればより狭いものを使用する必要があります。

または jQuery なしで、キャンバスに適用します。

canvas.oncontextmenu = function(e) { e.preventDefault(); e.stopPropagation(); }

編集済み

Fiddle の例を更新して、コンテキスト メニューが画像ではなくキャンバスに限定されていることを示しました。

Jクエリ

$('body').on('contextmenu', '#myCanvas', function(e){ return false; });

HTML の例

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<img src="http://db.tt/oM60W6cH" alt="bubu">
于 2012-06-02T17:09:12.383 に答える
21

これを試して

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};
于 2014-02-24T16:12:44.210 に答える
14

これにより、キャンバスのコンテキスト メニューが無効になります。 

<canvas oncontextmenu="return false;"></canvas>
于 2016-10-06T11:51:51.537 に答える
7

Try adding oncontextmenu="return false;" on the body tag. It should disable the context menu.

If I believe this source : http://javascript.about.com/library/blnoright.htm which is google's first result to the query "javascript disable right click" that you should have tried.

Edit :

  • about canvas I don't know the element, but did you try calling stopPropagation() on the event element once your function ends ?
  • or the previous solution on the canvas tag instead of the body...
于 2012-06-02T17:04:29.550 に答える