我有这个问题,我需要显示和隐藏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();
}
任何建议/忠告都非常感谢!
/帕特里克
6条答案
按热度按时间e5njpo681#
一个选项是检查
window.getSelection
返回的Selection
对象的type
:http://jsfiddle.net/k61u66ek/4/
更新
如果您的目标浏览器没有在
Selection
对象上公开type
属性,那么您可以测试所选值的长度:http://jsfiddle.net/k61u66ek/9/
这又可以简化为
toString
上的bool检查:if(!selection.toString()) {
http://jsfiddle.net/k61u66ek/10/
ki0zmccv2#
您可以检查单击事件处理程序中是否有选择:
ddhy6vgd3#
TLDRJS解决方案
演示:http://jsfiddle.net/5472ja38/
代码(当突出显示/选择文本时取消点击事件):
说明
document.getSelection().type
在文档对象级别检查是否有任何文本被突出显示。如果是,type 属性等于“Range”,则停止事件传播,这将取消单击切换按钮的更改。来源:MDN
描述当前选择的类型的DOMString。可能的值为:
无:当前未进行任何选择。
插入符号:所选内容被折叠(即插入符号被放置在一些文本上,但是没有选择范围)。
范围:已选择范围。
nqwrtyyt4#
您可以使用
mouseup
、mousedown
和mousemove
事件来实现这一点:DEMO
SOURCE
kb5ga3dv5#
另一种方法是使用选定内容的isCollapsed属性。根据MDN,如果选择的开始和结束是相同的,则返回true(单击也是如此):
nukf8bse6#
您可以检查“信息”div是否已切换:
检查此Fiddle