Question

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

我现在正在实现一项功能请求：表格中的图片不应该被复制。我的第一个想法是当我选择表时隐藏它们，并且再次，这工作正常。但是当我不再选择表格时，我想显示它们并且我的问题出现了：我不确定如何完成该部分。

我写了fiddle with a simplified example。典型的表格如下所示：

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

可以通过两种方式选择：

双击表格本身

......完成它的代码是：

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();
}

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

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

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

Answer 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将它们放在单元格上。如果已知图像和单元的大小，则更容易。您也可以将图像放在后台（不确定它们是否被复制）。

检测范围取消选择

1 个答案: