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>

防止按钮单击触发单击tr同时保持Clipboard.js完好无损

1 个答案: