jquery 在选择文本时防止onClick事件

dba5bblo  于 2023-06-05  发布在  jQuery
关注(0)|答案(6)|浏览(261)

我有这个问题,我需要显示和隐藏div时,点击一个表格单元格。然而,我也希望人们能够选择文本并在单元格内复制它,而不会隐藏信息。
如果有必要,完全可以改变设计。:)
这里有一把小提琴可以证明这个问题
http://jsfiddle.net/k61u66ek/1/
下面是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();    
}

任何建议/忠告都非常感谢!
/帕特里克

e5njpo68

e5njpo681#

一个选项是检查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/

ki0zmccv

ki0zmccv2#

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

window.getSelection().toString();
ddhy6vgd

ddhy6vgd3#

TLDRJS解决方案

演示: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。可能的值为:
无:当前未进行任何选择。
插入符号:所选内容被折叠(即插入符号被放置在一些文本上,但是没有选择范围)。
范围:已选择范围。

nqwrtyyt

nqwrtyyt4#

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

kb5ga3dv

kb5ga3dv5#

另一种方法是使用选定内容的isCollapsed属性。根据MDN,如果选择的开始和结束是相同的,则返回true(单击也是如此):

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

    // do something here
});
nukf8bse

nukf8bse6#

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

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

检查此Fiddle

相关问题