选择文本时阻止 onClick 事件

Question

我遇到了这个问题，我需要在单击 table 单元格时显示和隐藏 div。但是，我也希望人们能够 select 文本并将其复制到单元格中而不隐藏信息。

如有必要，完全愿意更改设计。 :)

这里有一个 fiddle 演示了这个问题

这是 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>

这是javascript：

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

非常感谢suggestion/advise！

/帕特里克

Answer 1

您可以检查是否在点击事件处理程序中进行了选择：

window.getSelection().toString();

Answer 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:

的 bool 检查

if(!selection.toString()) {

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

Answer 3

您可以使用 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

Answer 4

您可以检查 'information' div 是否已切换：

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

勾选这个Fiddle

Answer 5

TLDR

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

代码（文本highlighted/selected时取消点击事件）：

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

说明

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

取自MDN

A DOMString describing the type of the current selection. Possible values are:

None: No selection has currently been made.

Caret: The selection is collapsed (i.e. the caret is placed on some text, but no range has been selected).

Range: A range has been selected.

Answer 6

另一种方法是使用选择的 isCollapsed 属性。根据 MDN，如果选择的开始和结束相同（单击时为真），则 returns 为真：

document.getElementById('information').addEventListener('click', (e) => {
    if (!window.getSelection().isCollapsed) {
        return;
    }

    // do something here
});

选择文本时阻止 onClick 事件

Prevent onClick event when selecting text

html

javascript

jquery

show-hide