选择文本时阻止onClick事件

时间:2015-08-13 07:47:13

标签: javascript jquery html show-hide

我遇到了这个问题,我需要在点击表格单元格时显示和隐藏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();    
}

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

/帕特里克

5 个答案:

答案 0 :(得分:26)

一种选择是检查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/

然后可以减少到toString上的布尔检查:

if(!selection.toString()) {

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

答案 1 :(得分:2)

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

window.getSelection().toString();

答案 2 :(得分:2)

您可以使用mouseupmousedownmousemove事件来实现此目标:

<强> 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

答案 3 :(得分:2)

TLDR

演示:http://jsfiddle.net/5472ja38/

代码(突出显示/选择文本时取消单击事件):

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

说明

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

取自MDN

一个DOMString描述当前选择的类型。可能 值是:

无:目前没有选择。

Caret:选择的是 折叠(即,插入符号放在了某些文本上,但没有范围 被选中)。

范围:已选择一个范围。

答案 4 :(得分:0)

您可以检查'信息'div是否被切换:

web-ubuntu

检查此Fiddle