Is it possible to stop table sorting if user clicks on div inside of table header th?

In my case div has function onClick="resize(e)" on which I do:

function resize(e) {
        if (!e) var e = window.event;
        e.stopPropagation();
        ....

But it doesn't work.

Edit: Table is sorted before e.stopPropagation() or return false

Is it possible to stop table sorting if user clicks on div inside of table header th?

In my case div has function onClick="resize(e)" on which I do:

function resize(e) {
        if (!e) var e = window.event;
        e.stopPropagation();
        ....

But it doesn't work.

Edit: Table is sorted before e.stopPropagation() or return false

• javascript
• jquery
• tablesorter

• 1 Instead of using the onClick attribute, try attaching a click event using jQuery (something like $("th div").click(function(event){}); and put your resizing code in that function. Then event.stopPropagation() might work. – MrOBrian Commented Jun 29, 2012 at 0:20
• Thank you, but I've also tried it like Ajay beni indicated – andriy Commented Jun 29, 2012 at 10:24
• Can you show a live code or preferably a jsfiddle – Jashwant Commented Jun 30, 2012 at 14:17

3 Answers 3

I made two demos for you. The first one has the content of the table header wrapped in a span and the second one uses the undocumented onRenderHeader function to add the span inside the header. Either way, only the contents of the span are clickable (the text) while clicking outside of the content will sort the column. If you use a div only the header padding is available to initialize a column sort.

Demo 1 - header contents wrapped in the markup

$('table')
    .tablesorter()
    .find('.inner-header')
    .click(function(){
        console.log('header text clicked');
        return false;
    });

Demo 2 - header content wrapped using the onRenderHeader option

$('table').tablesorter({

    // customize header HTML
    onRenderHeader: function(index) {
        $(this)
            .wrapInner('<span class="inner-header"/>')
            .find('.inner-header')
            .click(function(){
                console.log('header text clicked');
                return false;
            });
    }

});​

If you need more information on using the onRenderHeader option, check out my blog post on what's missing in the documents.

I just ran into this exact problem. I tried everything suggested, including directly assigning a non-delegated event handler to the precise element I wanted, then stopping all propagation + the event itself. Still no luck.

But.... it turns out the jQuery tablesorter assigns an event to the mouseup event, not the click event (as you'd expect!). So to prevent tablesort from doing it's thing, you just need to cancel that event instead. Hope this helps.

• Ben

Stop propogation prevent event from bubbling up but it you want to cancel default action you should use event.preventDefault()