Strange right click behavior

edited October 2015 in p5.js

Found a strange right click behavior with google chrome.

Just used the code below

function draw() { if (mouseIsPressed) { if (mouseButton == LEFT ) { ellipse(mouseX,mouseY,80,80); } if (mouseButton == RIGHT ) { background(random(180,255),random(180,255),random(180,255)); } } }

with firefox, left click draw an ellipse. right click redraw the background.

with chrome, left click draw an ellipse, but right click make background blink until you click again in the windows. As if the right button was stuck. The mouseIsPressed seems to be persistant in chrome.

Any idea on the way to solve this problem ? How should I file a bug ?


  • One more thing.

    If I randomize the ellipse size, the left button behave the same way for a few moments.

    But if I use the

    function mousePressed() { }

    It's okay on chrome also

    It is as if the MouseIsPressed indicator was sluggishly removed on chrome ...

    strange ?

  • Either way, mousePressed() + mouseReleased() give us more control:

  • I agree it gives you more control. But for the beginnning pupils, it's more complicated to understand. Anyway, MouseIsPressed should work as expected and not stay on true even long after the button is released with right click. I've filed a bug in github finally. I've found a workaround for the rightclick behavior in chrome by adding a

    oncontextmenu=" event.preventDefault();"

    there is a real problem then.

  • did you try to use the function mousePressed

    instead the var ?

    it seems to be more stable

  • I effectively try to use the function wich seems to be more reliable. The mousePressed function would have been taught later in the cursus IMHO for my pupils. Testing a variable is simpler than having to explain about events.

    Anyway, having something unstable should be considered as a bug. Isn't it ?

  • @swirly: Interestingly the p5js source has the following comment:

    Warning: different browsers may track mouseButton differently.

    Unlike Processing, p5js has to operate in the context of a browser where you run into inconsitencies in different interpretations of the JavaScript standards. It looks like this may be the result of one such inconsistency. It's definitely worth reporting as a bug so someone can check the implementation.

    I'd be cautious about relying on adding event.preventDefault to get around it (how do you explain that to beginners!?). Instead why not provide a sketch template that includes the mousePressed/Released methods built-in and that set an appropriate variable in the sketch context? They're separate from the functions where you'll want your students to add code; so students won't need to know anything more than that the functions set the value of the variable. You can later go back and use them to introduce the concept of event handling etc.

  • It's not totally equivalent to use the Pressed/Released, beacause you have to deal with drag. So you must have a flag mode, (pressed raise the flag -> draw, released pull the flag, don't draw anymore). More complicated, but can be done.

    By the way, I've tried Processing P5JS on android with chrome and firefox mobile... almost all sketches of the gallery at least don't work or ... simply crash the browser !

  • By the way, thank you very very much everybody for you kind answers and your helpfull comments !

  • edited October 2015

    All Processing variants got mouseMoved() & mousePressed() too:

  • Answer ✓

    My previous message was a theoretical answer. Now that I'm at my PC and I can properly test this I can give a more practical answer: this really does look like a browser implementation issue. The following code - using mousePressed/Released exhibits the same unfortunate behaviour in Chrome:

    // uncomment to 'solve' the problem
    //window.addEventListener("contextmenu", function(e) { e.preventDefault(); })
    var mDown = false;
    function setup() {
    function draw() {
        var fill = '#f90';
        if(mDown) {
            fill = '#9f0'
    function mousePressed() {
        mDown = true;
    function mouseReleased() {
        mDown = false;

    There seem to be a lot of posts complaining of inconsistent handling of right-click events in browsers; so I doubt we'll have a solution in p5js. In practice if you're relying on right-button events in your sketch you should disable the context menu anyway - see commented out line above - though disabling built-in browser features is evil >:)

    Also if you're eventually targeting mobile browsers you shouldn't be relying on right-click at all ;)

  • Thank you very much blindfish for taking the time to test this. Ah .... browserS...

Sign In or Register to comment.