web-dev-qa-db-ja.com

テキストを選択するときにonClickイベントを防止する

テーブルセルをクリックしたときに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();    
}

どんな提案/アドバイスも大歓迎です！

/パトリック

javascriptjqueryhtmlshow-hide
26
PatrikJ

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()) {

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

37
Jamie Dixon

クリックイベントハンドラーで選択が行われたかどうかを確認できます。

window.getSelection().toString();
5
BobbyTables

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();
    }
});

[〜＃〜] source [〜＃〜]

4
Guruprasad Rao

'information' divが切り替えられているかどうかを確認できます：

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

これを確認してください フィドル

0
wilson