テーブルセルをクリックしたときに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();
}
どんな提案/アドバイスも大歓迎です!
/パトリック
1つのオプションは、_window.getSelection
_によって返されるtype
オブジェクトのSelection
をチェックすることです。
_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()) {
クリックイベントハンドラーで選択が行われたかどうかを確認できます。
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();
}
});
'information' divが切り替えられているかどうかを確認できます:
function toggleInfo() {
if(document.getElementById('information').style.display == 'none'){
$("#clicktoshow").toggle();
$("#information").toggle();
} else {
// do nothing
}
}
これを確認してください フィドル