選擇文本時防止onClick事件

我遇到了這個問題，我需要在單擊表格單元格時顯示和隱藏div。但是，我也希望人們能夠選擇文本並在單元格內複製它，而不隱藏信息。選擇文本時防止onClick事件

完全開放以在必要時更改設計。 :)

下面是這表明了問題

這裏提琴是在小提琴的HTML代碼：

<table border=1> 
    <tr> 
     <td> 
      Information 
     </td> 
     <td onClick="toggleInfo()"> 
      <div id="information" style="display:none"> 
       More information that I want to select without hiding 
      </div> 
      <div id="clicktoshow"> 
       Click to show info 
      </div> 

     </td> 
    </tr> 
</table>

這裏的JavaScript的：

function toggleInfo() { 
    $("#clicktoshow").toggle(); 
    $("#information").toggle();  
}

任何建議/ advise非常感謝！

/帕特里克

來源

2015-08-13 PatrikJ

簡單的解決方案將使用雙擊而不是單一的點擊。檢查http://jsfiddle.net/k61u66ek/2/ –

一種選擇是檢查由window.getSelection返回Selection對象的type：

function toggleInfo() { 
    var selection = window.getSelection(); 
    if(selection.type != "Range") { 
     $("#clicktoshow").toggle(); 
     $("#information").toggle(); 
    } 
}

http://jsfiddle.net/k61u66ek/4/

更新

如果你的目標不公開Selection對象的type屬性的瀏覽器，那麼你可以測試對所選值的長度，而不是：

function toggleInfo() { 
    var selection = window.getSelection(); 
    if(selection.toString().length === 0) { 
     $("#clicktoshow").toggle(); 
     $("#information").toggle(); 
    } 
}

http://jsfiddle.net/k61u66ek/9/

其中可以減少到一個布爾檢查toString：

if(!selection.toString()) {

http://jsfiddle.net/k61u66ek/10/

來源

2015-08-13 07:53:21

這不適合我。 – t00thy

Thanks @ t00thy，我更新了我的答案，在'type'不可用時包含解決方案。 –

或者有我的解決方案，在mouseclick上捕捉時間[http://jsfiddle.net/k61u66ek/15/](http://jsfiddle.net/k61u66ek/15/）我將200毫秒設置爲點擊和複製情況。也許它會有所幫助。 – t00thy

你可以檢查是否有在Click事件處理程序作出了選擇：

window.getSelection().toString();

來源

2015-08-13 07:53:16 BobbyTables

您可以使用mouseup，mousedown和mousemove事件來實現這一目標：

DEMO

var isDragging = false; 
$("#clickshow") 
.mousedown(function() { 
    isDragging = false; 
}) 
.mousemove(function() { 
    isDragging = true; 
}) 
.mouseup(function() { 
    var wasDragging = isDragging; 
    isDragging = false; 
    if (!wasDragging) { 
     $("#information").toggle(); 
     $("#clicktoshow").toggle(); 
    } 
});

SOURCE

來源

2015-08-13 07:55:15

您可以檢查「信息」的div被觸發：

function toggleInfo() { 
    if(document.getElementById('information').style.display == 'none'){ 
     $("#clicktoshow").toggle(); 
     $("#information").toggle(); 
    } else { 
     // do nothing 
    } 
}

入住這Fiddle

來源

2015-08-13 07:56:14 wilson

選擇文本時防止onClick事件

回答

相關問題