javascript - 防止按钮点击触发 tr 上的点击，同时保持 Clipboard.js 完好无损

Question

我有一个包含行的表格。每行都有一个使用 Clipboard.js 实现的“复制到剪贴板”按钮

现在，我希望表行可单击，并且如果用户单击该行上除按钮之外的任何位置，我希望它重定向到“google.com”。当用户单击按钮时，我想将文本复制到剪贴板，但不重定向。

我尝试使用解决方案 suggested in this answer here ，但使用 event.stopPropagation() 也会禁用 Clipboard.js 功能。

有没有一个优雅的解决方案来解决这个问题？这是一些代码:

<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

您可以在 tr 中有一个 td 类，除了最后一个存在复制按钮的类之外，然后您可以在行上应用点击事件每个 td 上的此点击事件，然后在点击事件中检查 td 是否具有指定的类，如果它已将其重定向到 google.com，则不执行任何操作。

下面是示例实现:

<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>