CODEWITHSUNDEEP
javascriptcheckboxqooxdoo
goldim
goldim

Reputation: 460

How to exclude click event for CheckBox widget?

I have a container and listener "click" on it. Inside this container I have a checkbox. If I click on the checkbox the listener function of the container is called. Is there a way to not trigger a listener of the container clicking on the checkbox?

There is code which could be executed on qooxdoo playground:

// Create a button
var button1 = new qx.ui.form.CheckBox();
const container = new qx.ui.container.Composite(new qx.ui.layout.Canvas);
container.setDecorator("main");
container.addListener("click", function(){
    console.log("aaaa");
}, this);
container.setWidth(50);
container.setHeight(50);
container.add(button1);

// Document is the application root
var doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(container,
{
  left : 100,
  top  : 50
});

Upvotes: 0

Views: 86

Answers (3)

Dhrumil Kumbhani
Dhrumil Kumbhani

Reputation: 141

Yes, we can stop that using stopPropagation() method of the events objects.

Updated Code:

// Create a checkbox
var checkbox = new qx.ui.form.CheckBox();
checkbox.addListener("click", function(event){
    // stop the event from propagating to the container
    event.stopPropagation();
}, this);

// Create a container with a click listener
const container = new qx.ui.container.Composite(new qx.ui.layout.Canvas);
container.setDecorator("main");
container.addListener("click", function(){
    console.log("Container clicked");
}, this);
container.setWidth(50);
container.setHeight(50);
container.add(checkbox);

// Add container to the document at fixed coordinates
var doc = this.getRoot();
doc.add(container, { left: 100, top: 50 });

Upvotes: 3

Chris Eskew
Chris Eskew

Reputation: 111

I'm thinking along the same lines as Derrell, except no need to add anything special to the checkbox or the next control you add.

// Create a button
var button1 = new qx.ui.form.CheckBox();
var container = new qx.ui.container.Composite(new qx.ui.layout.Canvas);
container.setDecorator("main");
container.addListener("click", function(e){
    var target = e.getTarget();
    var ctarget = e.getCurrentTarget();
    if (target == ctarget)
    {
      console.log("container");
    }
    else
    {
      console.log("not the container")
    }
});
container.setWidth(50);
container.setHeight(50);
container.add(button1);

// OR, uncomment this out to stop propagation after the checkbox click
/*button1.addListener("click", function(e) {
  console.log("button click handler");
  e.stopPropagation();
});*/

// Document is the application root
var doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(container,
{
  left : 100,
  top  : 50
});

Upvotes: 1

Derrell Lipman
Derrell Lipman

Reputation: 616

This is a bit kludgy and doesn't quite answer your question, but it does allow you to detect that the button handler already handled the event. Maybe this is adequate for your purposes?

// Create a button
var button1 = new qx.ui.form.CheckBox();
const container = new qx.ui.container.Composite(new qx.ui.layout.Canvas());
container.setDecorator("main");
container.addListener("click", function(e){
    console.log("container click handler: handled=", e.getUserData("handled"));
}, this);
container.setWidth(50);
container.setHeight(50);
container.add(button1);

button1.addListener("click", function(e) {
  console.log("button click handler");
  e.setUserData("handled", true);
});

// Document is the application root
var doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(container,
{
  left : 100,
  top  : 50
});

Upvotes: 1

Related Questions