Prevent button click from triggering click on tr while keeping Clipboard.js intact

Question

I have a table with rows. In each row there is a "copy to clipboard" button implemented using Clipboard.js

Now I want the table row to be clickable and I want it to redirect to "google.com", if the user clicks anywhere on the row BUT the button. When the user clicks the button, I want to copy the text to the clipboard, but NOT redirect.

I have tried using the solution suggested in this answer here, but using event.stopPropagation() also disables the Clipboard.js functionality.

Is there an elegant solution for this problem? Here's some code:

<table>
    <tr>
        <th>Name</th>
        <th></th>
    </tr>
    <tr class='valign-middle' data-href='www.google.com'>
        <td>Text</td>
        <td>
            <button data-clipboard-text='www.facebook.com' id='clipboard-btn'>
            <i class="fa fa-clipboard"></i>
            </button>
        </td>
    </tr>
</table>
<script>
    // activate Clipboard buttons
    var clipboard = new Clipboard('button#clipboard-btn');

    // make table rows clickable
    $(function(){
        $('.table tr[data-href]').each(function(){
            $(this).css('cursor','pointer').hover(
                function(){ 
                    $(this).addClass('active'); 
                },  
                function(){ 
                    $(this).removeClass('active'); 
                }).click( function(event){
                    document.location = $(this).attr('data-href'); 
                }
            );
        });
    });
</script>

Answer 1

You can have a class for td in tr except for the last one in which your copy button is present, then instead of applying click event on row you can have this click event on each td and then check in click event whether td has that specified class or not, if it has redirect it to google.com else do nothing.

Below is the sample implementation :

<table>
    <tr>
        <th>Name</th>
        <th></th>
    </tr>
    <tr class='valign-middle' data-href='www.google.com'>
        <td class='normalText'>Text</td>
        <td>
            <button data-clipboard-text='www.facebook.com' id='clipboard-btn'>Copy
            <i class="fa fa-clipboard"></i>
            </button>
        </td>
    </tr>
</table>

<script>
 var clipboard = new Clipboard('button#clipboard-btn');

    // make table rows clickable
    (function(){
        $('table tr[data-href] td').each(function(){
            $(this).css('cursor','pointer').hover(
                function(){ 
                    $(this).addClass('active'); 
                },  
                function(){ 
                    $(this).removeClass('active'); 
                });
                $(this).click( function(event){
                    if($(this).hasClass("normalText"))
                    document.location = $(this).parent().attr('data-href'); 
                }
            );
        });
    });
</script>