0

在一个包含大量数字的数据表的站点中，我添加了一个帮助函数来选择给定的表，以便用户可以将数据复制到剪贴板并将其粘贴到他最喜欢的电子表格软件中。请注意，我的函数不会将任何内容复制到剪贴板，它只是突出显示适当的 HTML 元素（即完整的<table>）。这部分工作正常。

我现在正在实现一个功能请求：表格内的图像不应该被复制。我的第一个想法是在我选择表格时将它们隐藏起来，而且效果很好。但我想在不再选择表格时向他们展示，这是我的问题：我不确定如何完成那部分。

我用一个简化的例子组成了一个小提琴。一个典型的表如下所示：

<div>
    <table class="data">
        <tr>
            <th>Table</th><td>#1</td><td><img src="/img/logo.png"></td>
        </tr>
    </table>
    <input type="button" class="select" value="Select">
</div>

可以通过两种方式选择：

  1. 下面的“选择”按钮
  2. 双击表格本身

...完成它的代码是：

jQuery(function($){
    $("body").on("dblclick", "table.data", function(){
        selectTable($(this));
        return false;
    });
    $("body").on("click", ".select", function(){
        selectTable($(this).siblings("table.data:first"));
        return false;
    });
    $(document).on("click", noTableSelected);
});

function selectTable($table){
    $table.find("img").hide();
    selectNode($table[0]);
}
function noTableSelected(){
    $("table.data img").show();
}

... whereselectNode()负责创建文本范围并选择它。

我需要帮助$(document).on("click", noTableSelected);。除了过度杀伤之外，它还会在用户使用上下文菜单到达“复制到剪贴板”命令时触发。我也尝试过捕获blur表格上的事件，但是当我认为它会触发时，这样的事件并没有触发（我想在不处理表单控件时它是没用的）。

有什么想法可以noTableSelected()在适用时启动吗？或者，有没有更好的方法来避免将图像复制到剪贴板？

4

1 回答 1

1

一种可能的解决方案是检查event.target文档单击处理程序中的属性。根据文档：

启动事件的 DOM 元素。

您可以检查表是否生成了这样的点击事件：

$(document).on("click", function(e){
    console.log("document was clicked");
    if ($(e.target).closest(".data").length == 0) {
        console.log("but the click wasn't triggered by .data");
    }
});

我想到的另一种解决方案是将图像放在表格之外并使用 jQuery 将它们定位在单元格上。如果图像和单元格的大小已知，则更容易。您还可以将图像放在背景中（不确定它们是否被复制）。

于 2013-04-03T09:49:44.213 回答