问题
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
回答1:
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.
回答2:
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
回答3:
Stop propogation prevent event from bubbling up but it you want to cancel default action you should use event.preventDefault()
来源:https://stackoverflow.com/questions/11117662/jquery-table-sorter-stop-sorting