Strange behavior when using mouseClicked() and HTML checkbox element

felixaustria

Hello guys, I hope someone of you might be able to explain this problem to me.

I currently use the mouseClicked() event for my p5js script. When I wanted to add a standard HTML checkbox outside of the canvas I realized that it's not being checked or unchecked when you click on it. After a lot of trying around I found out that the reason for the problem is that my mouseClicked() function returned false. Could someone of you explain to me why this error is happening? Why exactly is this function interfering with checking/unchecking a checkbox?

I tried to reproduce it on jsfiddle but couldn't really get it working so I hope that my code below is enough.

HTML:

<input type="checkbox" id="moveToMouseCB" checked>

JS:

function mouseClicked() {

    if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

        this.turret.shoot()

    }

    return false;
}

Thank you :)

GoToLoop

1. https://Forum.Processing.org/two/discussions/tagged/elt.checked
2. https://Forum.Processing.org/two/discussions/tagged?Tag=preventdefault()
3. https://Developer.Mozilla.org/en-US/docs/Web/API/Event/preventDefault

kfrajer

Check this example: https://p5js.org/reference/#/p5.Element/mousePressed

You could associate your event to the canvas as shown above.

Kf

felixaustria

Thank you very much for your answers.

If I understand it correctly the problem is that the mouseClicked() would overwrite whatever Chrome is usually doing when the mouse button is clicked, correct?

@kfrajer: Your tip helped me using the code as I intended to :)