我遇到了这个问题,在单击表格单元格时需要显示和隐藏 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();
}
非常感谢任何建议/建议!
/帕特里克
一种选择是检查
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()) {
代码片段 - 当文本突出显示/选择时取消点击事件:
document.getElementById('information').addEventListener('click', (e) => {
const cellText = document.getSelection();
if (cellText.type === 'Range') e.stopPropagation();
})
演示链接:http://jsfiddle.net/5472ja38/
解释
document.getSelection().type
检查文档对象级别是否有任何文本已突出显示。如果是这样,type属性等于“范围”停止事件传播,这将取消单击切换按钮更改。
摘自MDN
描述当前选择类型的 DOMString。可能的 值为:
无:当前尚未做出选择。
插入号:选择的是 折叠(即插入符号被放置在某些文本上,但没有范围 已被选中)。
范围:已选择范围。
您可以检查单击事件处理程序中是否进行了选择:
window.getSelection().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();
}
});
另一种方法是使用选择的 isCollapsed 属性。根据 MDN,如果选择的开始和结束相同(单击也是如此),则返回 true:
document.getElementById('information').addEventListener('click', (e) => {
if (!window.getSelection().isCollapsed) {
return;
}
// do something here
});
您可以检查“信息”div 是否已切换:
function toggleInfo() {
if(document.getElementById('information').style.display == 'none'){
$("#clicktoshow").toggle();
$("#information").toggle();
} else {
// do nothing
}
}
检查这个小提琴