檢測範圍取消選擇

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> 

它可以通過兩種方式來選擇：

1. 的對錶本身

「選擇」按鈕下方

雙擊...和完成它的代碼是：

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在他們定位細胞。如果圖像和細胞的大小已知，則更容易。你也可以把圖像放在後臺（不知道它們是否被複制）。