Results 1 to 2 of 2

Thread: [4.2.1] Double click events fired when clicking checkbox label

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium User mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,048
    Vote Rating
    183
      0  

    Default [4.2.1] Double click events fired when clicking checkbox label

    Open http://docs.sencha.com/extjs/4.2.1/e...mes/index.html

    Run in console
    Code:
     Ext.get('fooChk').on({
                mousedown : console.log,
                mouseup : console.log,
                click : console.log,
                scope : console
            })
    Click the "Foo" text and note console output.

    Code:
    A {browserEvent: MouseEvent, type: "mousedown", button: 0, shiftKey: false, ctrlKey: false}
     
    <label id=?"fooChk-boxLabelEl" class=?"x-form-cb-label x-form-cb-label-after" for=?"fooChkInput">?Foo?</label>?
     
    Object {mousedown: function, mouseup: function, click: function, scope: Console}
    A {browserEvent: MouseEvent, type: "mouseup", button: 0, shiftKey: false, ctrlKey: false}
     
    <label id=?"fooChk-boxLabelEl" class=?"x-form-cb-label x-form-cb-label-after" for=?"fooChkInput">?Foo?</label>?
     
    Object {mousedown: function, mouseup: function, click: function, scope: Console}
    A {browserEvent: MouseEvent, type: "click", button: 0, shiftKey: false, ctrlKey: false}
     
    <label id=?"fooChk-boxLabelEl" class=?"x-form-cb-label x-form-cb-label-after" for=?"fooChkInput">?Foo?</label>?
     
    Object {mousedown: function, mouseup: function, click: function, scope: Console}
    A {browserEvent: MouseEvent, type: "click", button: 0, shiftKey: false, ctrlKey: false}
     
    <input type=?"button" id=?"fooChkInput" class=?"x-form-field x-form-checkbox x-form-cb " autocomplete=?"off" hidefocus=?"true" aria-invalid=?"false" data-errorqtip>?
     
    Object {mousedown: function, mouseup: function, click: function, scope: Console}

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,438
    Vote Rating
    859
      0  

    Default

    This is just how the browser behaves, you'd need to preventDefault to stop it:

    Code:
    Ext.onReady(function() {
        var ct = document.createElement('div');
        
        var box = document.createElement('input');
        box.type = 'checkbox';
        box.id = 'fooBox';
        
        var label = document.createElement('label');
        label.innerHTML = 'Foo';
        label.htmlFor = 'fooBox'; 
        
        ct.appendChild(box);
        ct.appendChild(label);
        
        document.body.appendChild(ct);
        
        ct.addEventListener('click', function(e) {
            //e.preventDefault();
            console.log(e.target);
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •