Prevent bubbling up to responsive target class

gloosemo

Hey Alan I love datatables great job dude.

I'm having a bit of an issue using responsive. The target for responsive is the class .dtLawCanExpand, which are several tds in the row (most of the tds). In one of these tds there is sometimes a different element i want the user to be able to click on and not have the row expand or collapse child rows, and instead some other action. I can't seem to stop the bubbling up and could use your help. Specifically what i want is open child rows not to collapse when clicking on this other element (a superscript)

here is my table initialization:

    var desc = 'Group 1';
    var tabId = '#iLAW_H01Tab';
    var tabDt = $( tabId ).DataTable({
        select: true,
        "autoWidth": false,
        "paging": false,
        "oLanguage": {
            "sEmptyTable": "No " + desc + " to Display",
            "sSearch": "<div class='dtSearchTextDiv'>Search this Category:</div>"
        },
        "bInfo": false,
        responsive: {
            breakpoints: [
                { name: 'h01A',  width: 400 }, 
                { name: 'h01B',  width: 600 }, 
                { name: 'h01C',  width: 800 },
            ],
            details: {
                type: 'column',
                target: '.dtLawCanExpand', // class of tds that when you click on them will expand the row. excludes favourite td
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        var returnVal = '';
                        if ( col.hidden && 
                             col.data.indexOf( '<i class="fa fa-arrow-circle-right ' ) == -1 &&
                             col.data.indexOf( '<i class="fa fa-arrow-circle-down ' ) == -1 ) {
                            if ( col.title != 'Text' ) {
                                // the item is not the text column (is probably code column)
                                returnVal += "<tr data-dt-row='" + col.rowIndex + "' data-dt-column='" + col.columnIndex + "'>";
                                    returnVal += "<td class='cBold cDtChildTitleTD'>" + col.title + ":</td>";
                                    returnVal += "<td class='cDtChildDataTD'>" + col.data + "</td>";
                                returnVal += "</tr>";
                            } else {
                                // the item is the text item, only want to insert a single td with colspan for the text editor
                                returnVal += "<tr data-dt-row='" + col.rowIndex + "' data-dt-column='" + col.columnIndex + "'>";
                                    returnVal += "<td class='cDtChildTextOnlyTD' colspan='2'>" + col.data + "</td>";
                                returnVal += "</tr>";
                            }
                        }
                        return returnVal;
                    } ).join(''); 
                    return data ?
                        $("<table class='cDtChildRenderTable' />").append( data ) :
                        false;
                }
            }
        },
        order: [], // IMPORTANT, let server sort
        "columns": [
            { "title": "", "data": "arrow", "width": "1%", "orderable": false, 'className': 'dtMainRowTD dtLawArrow dtLawCanExpand' },
            { "title": "", "data": "icon", "width": "1%", "orderable": false, 'className': 'dtMainRowTD dtLawFav' },
            { "title": "Detail ID", "data": "id", "width": "0%", 'className': 'dtMainRowTD dtLawId dtLawCanExpand' },
            { "title": "Title", "data": "title", "width": "20%", 'className': 'dtMainRowTD dtLawTitle dtLawCanExpand' },
            { "title": "Code", "data": "code", "width": "10%", 'className': 'dtMainRowTD dtLawCode dtLawCanExpand' },
            { "title": "Text", "data": "text", "width": "70%", 'className': 'dtMainRowTD dtLawText dtLawCanExpand' },
            { "title": "Text_Store", "data": "text_store", "width": "0%", 'className': 'dtMainRowTD dtLawTextBackup dtLawCanExpand'},
            { "title": "Category", "data": "category", "width": "0%", 'className': 'dtMainRowTD dtLawCat dtLawCanExpand' },
            { "title": "Category_Code", "data": "category_code", "width": "0%", 'className': 'dtMainRowTD dtLawCatCode dtLawCanExpand' },           
        ],
    });

and here is an example of what I'm talking about, a typical row would look like

<tr>
<td class='dtLawCanExpand'>CONTENT 1</td>
<td class='dtLawCanExpand'>CONTENT 2<sup>SUPERSCRIPT</sup></td>
</tr>

When user clicks anywhere in the cell outside of a superscript, the row needs to expand/collapse, but if the cell has a superscript and they click on it, i don't want it to expand/collapse. I was thinking if i could do some sort of conditional test when deciding to expand or collapse the child row, BEFORE it actually collapses.

Thanks for your help