jQuery：捕获点击，但仍然允许选择文本

Question

我试图创建一个内联textarea，其中用户单击一段文本和一个textarea替换它。

这一切都很顺利，但是当我尝试选择/高亮区域中的文本时，它会显示textarea。

我注意到，在Trello上，它设法避免这种情况。

我的HTML如下：

<h2>Your Notes</h2> 
<span id="notes_area" style="display: block;" data-entry-id="<%= @entry.id %>" title="Click to edit your notes."> 
    <p><%= @entry.notes.present? ? "#{@entry.notes}" : "You have not added any notes for this episode." %></p> 
</span> 

而我的CoffeeScript如下（有很多切出）：

$("#notes_area").bind "mouseup", -> 
    display_inline_note_form() 

display_inline_note_form = -> 
    # code goes here... 

我想像这是一个解决问题，但我似乎无法在网上找到任何东西。

感谢

Answer 1

可以检查用户是否已经调用之前选择任何文本“display_inline_note_form（）”。

$("#notes_area").bind "mouseup", -> 
    var selectedTxtRange = getSelectedText(); 
    if(selectedTxtRange.toString().length == 0) 
     display_inline_note_form() 

这里是getSelectedText（）的定义，我得到这个code snippet from CodeToad，

function getSelectedText() 
{ 
    var txt = ''; 

    if (window.getSelection) 
    { 
     txt = window.getSelection(); 
      } 
    else if (document.getSelection) 
    { 
     txt = document.getSelection(); 
      } 
    else if (document.selection) 
    { 
     txt = document.selection.createRange().text; 
      } 

     return txt;  
}