Javascript 选择文本时防止onClick事件

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

如有必要，完全可以更改设计。：）

这是一把小提琴，它展示了这个问题

下面是fiddle中的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>

非常感谢您的任何建议

---

/Patrik

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

window.getSelection().toString();

---

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

window.getSelection().toString();

---

一个选项是检查

窗口返回的
选择
对象的
类型

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


更新

如果目标浏览器未在
选择
对象上显示
类型
属性，则可以根据选定值的长度进行测试：

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


这反过来可以减少到
toString
上的bool检查：

if（！selection.toString（））{

一个选项是检查
窗口返回的
选择
对象的
类型。getSelection
：

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


更新

如果目标浏览器未在
选择
对象上显示
类型
属性，则可以根据选定值的长度进行测试：

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


这反过来可以减少到
toString
上的bool检查：

if（！selection.toString（））{

您可以使用
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();
    }
});

您可以使用
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();
    }
});


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

您可以检查“信息”div是否已切换：

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

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

检查此项
您可以检查“信息”div是否已切换：

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

检查此项
TLDR

演示：

代码（当文本突出显示/选中时取消单击事件）：

解释

document.getSelection（）.type
在文档对象级别检查是否突出显示了任何文本。如果是，type属性等于“Range”，则停止事件传播，这将取消单击切换按钮更改

取自

描述当前选择类型的DOMString。可能是
价值观是：

无：当前未进行任何选择

插入符号：选择是
折叠（即插入符号放置在某些文本上，但没有范围）
（已选定）

范围：已选择一个范围

TLDR

演示：

代码（当文本突出显示/选中时取消单击事件）：

解释

document.getSelection（）.type
在文档对象级别检查是否突出显示了任何文本。如果是，type属性等于“Range”，则停止事件传播，这将取消单击切换按钮更改

取自

描述当前选择类型的DOMString。可能是
价值观是：

无：当前未进行任何选择

插入符号：选择是
折叠（即插入符号放置在某些文本上，但没有范围）
（已选定）

范围：已选择一个范围

简单解决方案将使用双击而不是单击。检查简单解决方案将使用双击而不是单击。检查感谢@t00thy，我已更新了我的答案，以在
类型
不可用时包含一个解决方案。或者有我的解决方案，通过鼠标单击捕获时间，我将200毫秒设置为c之间的差值单击并复制情况。可能会有所帮助。似乎toString（）比type==“Range”是一个更好的选项，至少在IE11和FirefoxThank@t00thy上，我已经更新了我的答案，以便在
类型
不可用时包含一个解决方案。或者有我的解决方案，通过在鼠标单击上捕捉时间，我将200毫秒设置为单击和复制情况之间的差异。也许这会有所帮助。似乎toString（）是比type==“Range”更好的选择，至少在IE11和Firefox上