Question 50682 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to exclude click event for CheckBox widget? – Javascript

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

3

Answers


  1. 0

    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
});
    Login or Signup to reply.
  2. 0

    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
});
    Login or Signup to reply.
  3. 0

    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 });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search