Mouse event unwantedly interferes with button click

Processing Coding Questions
1

Part of a sketch uses a button and a mouse event where the mouse event should only occur within the border of a rectangle. Unfortunately, my code forces the user to click the button twice before taking any action. This is annoying and makes a terrible mess if there are multiple buttons. How come and how can I prevent this.

// libraries
import controlP5.*;

// miscellaneous
int start_time; // Add a holder for the startup time in milliseconds

// font
PFont font;

// make controllers
ControlP5 MyController;
Button but_Quit;
Textlabel tlb_ButtonPressed;
Textlabel tlb_MousePressed;

void settings() {
  fullScreen();
}

void setup() {
  // draw settings
  imageMode(CENTER);
  // initialise controls
  MyController = new ControlP5(this);
  font = createFont("ProcessingSansPro-Regular-48", 25);
  MyController.setFont(font);

  // make button Quit
     but_Quit = MyController.addButton("but_Quit")
    .setPosition(width/2 - 60, height/2 - 500)
    .setSize(120,120)
    ; 

  // make textlabel ButtonPressed 
  tlb_ButtonPressed = MyController.addLabel("buttonPressed")
    .setText("Button was pressed")
    .setPosition(width/2 - 100, height/2 - 300)
    .setColor(color(#FF0318));
  tlb_ButtonPressed.hide();

  // make textlabel MousePressed 
  tlb_MousePressed = MyController.addLabel("mousePressed")
    .setText("Mouse was pressed")
    .setPosition(width/2 - 60, height/2 + 300)
    .setColor(color(#000000));
  tlb_MousePressed.hide();
}

void but_Quit() {
  if (millis()-start_time<1000) {
    return;
  }
  println("ButtonEvent");
  tlb_MousePressed.hide();
  tlb_ButtonPressed.setText("Button was pressed at x:" + mouseX +" ,y:" + mouseY);
  tlb_ButtonPressed.show();
}

void mouseEvent() {
  if ((mouseX >= (width/2 - 250)) && (mouseY >= (height/2 - 250)) 
   && (mouseX <= (width/2 + 250)) && (mouseY <= (height/2 + 250))) {
  // mouseEvent only allowed inside the rectangle area   
  println("MouseEvent");   
  tlb_ButtonPressed.hide();
  tlb_MousePressed.setText("Mouse was pressed at x:" + mouseX +" ,y:" + mouseY);
  tlb_MousePressed.show();
  }
}

void draw() {
  background(255);
  rect(width/2 - 250,height/2 -250,500,500);
  
  mouseEvent();
}
2

not sure how to achieve what you want with cp5 as I’ve not made a lot of personal use with it. I have however produced my own gui library for windows, (shameless plug I know).

This is an example sketch.

BMS b;
	Button b1,b2,b3;
	
	public void settings() {
		size(700, 500);
		
	};

	public void setup() {
		surface.setTitle("TestBench2!");
		surface.setResizable(true);
		surface.setLocation(-10, 0);
		String [] d1l = {"1","2"};
		b = new BMS(this,true);
		b1 = new Button(200,200,90,20,"BTN1",b);
		b.add(b1);
	};

	public void draw(){
		background(0,0);
		fill(64);
		rect(0,0,width,height,10);
                /* the button has been declared within the sketch so you can bind events to it by its 
                variable name*/
		b1.toggle();
                //it can also be accessed as follows
                //b.toggle(0);
                //you can also bind it to a class and a boolean variable as such
                //when the button is clicked it will set the variabe to the value of the button toggle
                //b.toggle(0,someClass,"someVariable");
                // also this can be done with the button variable so the following is also possible
                //b1.toggle(someClass,"someVariable");

		b.run();
		if(b1.click)println("BTN1 click");
		if(b1.toggle)b1.label = "toggle";
		else b1.label = "BTN1";
		b.theme.run();
	};

	public void mousePressed() {

		//f.writeLine("hello");
	};

	public static void main(String[] args) {
		PApplet.main(MySketch1.class.getName());
	};

	public void keyPressed() {

	};
3

I have reposted the problem, in a simplified form, in the Android section as in Java mode everything works fine. Anyway thanks for your help. I have not yet explored you suggestion to have the buttons in the draw section.