Deaktivieren des Rechtsklick-Kontextmenüs in einem HTML-Canvas?

Macht eine Malerei-app mit HTML5 und Canvas.

Ich denke, ich möchte haben ein ähnliches system, Anwendungen wie Paint und Photoshop, wo Sie können eine primäre und eine sekundäre Farbe ausgewählt und verwenden Sie die Links klicken, um die Farbe mit der Grundfarbe und der rechten Maustaste, um zu malen mit der sekundären Farbe.

Jedoch, nachdem man löst die Rechte Maustaste das Kontextmenü in die browser gebracht wird (Bild anzeigen, Bild speichern, wählen Sie alle).

Können diese elegant deaktiviert? Ich will nicht, dass es ein hackish-Lösung, die funktioniert nur auf einigen Browsern, wenn möglich.

Dank.

InformationsquelleAutor der Frage Ryan Peschel | 2012-06-02

  1. 36

    Diese:

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

    Sehen diese Beispiel!

    Mit den neuesten jQuery:

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

    Hinweis:die Sie verwenden sollten etwas schmaler als body wenn möglich!

    BEARBEITET

    Aktualisiert die Fiddle-Beispiel zu zeigen, die contextmenu-begrenzt auf die Leinwand und nicht auf das Bild.

    JQUERY

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

    HTML-BEISPIEL

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

<img src="http://db.tt/oM60W6cH" alt="bubu">

    InformationsquelleAutor der Antwort Zuul

  2. 15

    Versuchen, diese

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

    InformationsquelleAutor der Antwort Andrew Nodermann

  3. 7

    Versuchen Sie oncontextmenu="return false;" auf das body-tag. Es sollte deaktivieren Sie das Kontext-Menü.

    Wenn ich glaube, dass diese Quelle : http://javascript.about.com/library/blnoright.htm was ist google das erste Ergebnis der Abfrage "javascript deaktivieren, klicken Sie rechts", die sollte man probiert haben.

    Edit :

    • über die Leinwand, ich weiß nicht, das element, aber haben Sie versucht, ruft
      stopPropagation() auf der event-element, sobald Sie Ihre Funktion endet ?
    • oder die bisherige Lösung auf dem canvas-tag statt den Körper...

    InformationsquelleAutor der Antwort Vinze

  4. 4

    Deaktiviert das Kontextmenü auf der Leinwand. 

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

    InformationsquelleAutor der Antwort quemeful

Schreibe einen Kommentar