web-dev-qa-db-ja.com

HTMLキャンバスの右クリックコンテキストメニューを無効にしますか？

HTML5とCanvasを使用してペイントアプリを作成します。

ペイントやPhotoshopのようなアプリケーションに似たシステムを作りたいと思います。そこでは、原色と二次色を選択し、左クリックで原色でペイントし、右クリックで二次色でペイントできます。

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

これをエレガントに無効にすることはできますか？可能であれば一部のブラウザでのみ動作するハック的なソリューションにしたくない。

ありがとう。

javascriptjqueryhtmlhtml5canvas
35
Ryan Peschel

これを使用できます：

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

こちらをご覧ください 実施例 ！

最新のjQueryの場合：

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

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

編集済み

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

[〜＃〜] jquery [〜＃〜]

$('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">
37
Zuul

これを試して

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};
16
Andrew Nodermann

Bodyタグに_oncontextmenu="return false;"_を追加してみてください。コンテキストメニューを無効にする必要があります。

私がこのソースを信じている場合： http://javascript.about.com/library/blnoright.htm これは、「javascript disable right click」クエリに対するGoogleの最初の結果です。

編集：

  • キャンバスについて要素はわかりませんが、関数が終了したらイベント要素でstopPropagation()を呼び出してみましたか？
  • またはbodyの代わりにcanvasタグの以前のソリューション...
7
Vinze

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

<canvas oncontextmenu="return false;"></canvas>
7
quemeful

これにより、他の回答よりも最新の（読みやすい）構文でジョブを実行できます。

const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;
4
borrascador

Jquery Jsへの依存を避けて、canvasだけでなく他の要素でもpreventDefaultイベントを試しました。 crossBrowserについては、このページを確認しました： Events-Contextmen 。

おそらく未定義を返すアイテムの検証が必要ですが、それはデモンストレーションとして機能します。

(function(w, d){
        d.body.addEventListener('contextmenu', function(event){
                var blockContext = [
                        { type: 'tag', value: 'canvas'},
                        { type: 'id',  value: 'fooId'},
                        { type: 'tag',  value: 'img'},
                ];
                blockContext.map(
                        Elm => {
                                var _Elm
                                
                                if(Elm.type == 'tag') _Elm = d.querySelector(Elm.value);
                                if(Elm.type == 'id') _Elm = d.getElementById(Elm.value);

                                if(event.target == _Elm) event.preventDefault();
                        }
                );
        });
})(window, document);
canvas {
background-color: grey;
}
<canvas></canvas>
<img src="https://via.placeholder.com/200x200"/>
<p id="fooId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lorem luctus nisi fermentum imperdiet in ac tortor. Vestibulum interdum risus vitae metus finibus pretium. Nullam facilisis lacus nec pellentesque faucibus. In tempus lorem ut mi sodales, vitae scelerisque quam pretium. Duis venenatis enim in nunc laoreet venenatis. Aliquam at magna vitae purus tincidunt posuere. Donec dictum pharetra ipsum, eu auctor lorem aliquet vitae. Donec faucibus metus quis laoreet ultricies. Aliquam aliquet, lectus a tempor tristique, diam sem auctor felis, sed ultrices magna nunc ut sem. Curabitur congue diam lacinia risus sodales luctus. In nec maximus ex. Nulla ultrices diam a erat imperdiet, nec convallis nisl pulvinar. Etiam quis placerat arcu, eu elementum felis. Phasellus lectus massa, faucibus faucibus nibh ut, dignissim tempor neque.
<p/>
0
HarleySG