Strange click event propagation problem

Vaadin 6 / 7 / 8 Framework UI
1

Hello everyone,

I would like to add a button to a table header. I accomplished this by using the following

String columnID = "Test"; table.setColumnHeader(columnID, "<input type='button' id='headerButton' onClick='myJSFunction(event)'/>" + columnID); This is pretty much what is advised in this thread (
https://vaadin.com/forum/#!/thread/774477/8020605
).

However, the problem is that I also want this table to be sortable if the user clicks on a header. So
“clicking the header panel”
 and
“clicking the button inside the header panel”
 should
do two different things
. Common sense would tell me that the browser receives the click event on the header button (i.e. innermost HTML element) and then propagates (“bubbles”) the event upwards the HTML DOM tree to the table header panel. So I tried to disable the event bubbling:

(this is client-side javascript)

function myJSFunction(event){
    if(!event){
        // Internet Explorer 8 and lower
        event = window.event;
    }
    if(event.stopPropagation){
        // Internet Explorer 9 & other browsers
        event.stopPropagation();
    }else{
        // Internet Explorer 8 and lower
        event.cancelBubble = true;
    }
    // actual event processing for the button goes here
}

The Firefox debugger tells me that the “myJSFunction(…)” is called correctly upon button click. However, no matter what I do, the table ALWAYS gets sorted! I tried returning “false” in the “onClick” attribute and in the event handler function, but to no avail.
.
I’d be grateful for any advice.

Martin

2

After almost 5 hours of experimenting I finally found the cause for the strange behaviour. I should have realized that a lot sooner.

In case somebody is interested in the solution:

The table column header does not perform the sorting upon the JavaScript event “onClick”. It uses “onMouseUp”. My additional button properly blocked the JavaScript-level propagation of the click event, but it did nothing to onMouseDown and onMouseUp, respectively. So, after attaching handlers to these two events (that do nothing else than blocking the JS event propagation, using the JS example I’ve posted above), everything works nicely.