javascriptcheckboxqooxdoo

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
});

Solution

  • 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 });