选择文本时阻止onClick事件

Question

我有这个问题,我需要在单击表格单元格时显示和隐藏div.但是,我也希望人们能够在单元格中选择文本并将其复制而不隐藏信息.

如有必要,完全可以更改设计.:)

这是一个演示这个问题的小提琴

http://jsfiddle.net/k61u66ek/1/

这是小提琴中的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();    
}

任何建议/建议非常感谢!

/帕特里克

Answer 1

一种选择是检查返回type的Selection对象window.getSelection:

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

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

更新

如果您要定位的浏览器未type在Selection对象上公开属性,则可以测试所选值的长度:

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

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

这可以反过来减少到bool检查toString:

if(!selection.toString()) {

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

Answer 2

代码片段- 当文本突出显示/选择时取消点击事件：

document.getElementById('information').addEventListener('click', (e) => {
  const cellText = document.getSelection();
  if (cellText.type === 'Range') e.stopPropagation();
})

演示链接：http://jsfiddle.net/5472ja38/

解释

document.getSelection().type检查文档对象级别是否有任何文本已突出显示。如果是这样，类型属性等于“范围”，停止事件传播，这将取消单击切换按钮更改。

摘自MDN

描述当前选择类型的 DOMString。可能的值为：

无：当前尚未做出选择。

插入符号：所选内容已折叠（即插入符号放置在某些文本上，但未选择任何范围）。

范围：已选择一个范围。

Answer 3

您可以检查click事件处理程序中是否有选择：

window.getSelection().toString();

Answer 4

您可以使用mouseup,mousedown和mousemove事件来实现这一点：

演示

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

来源