2

私は、div からテキストを選択した後 (contenteditable = true)、ユーザーがオプション付きのツールチップを取得する小さな Web アプリケーションに取り組んでいます。

ユーザーがテキストを選択すると、fadesIn 「mouseup」イベントのツールチップ。イベントmousedownはツールチップに使用されfadeOutます。

ユーザーがテキスト全体を選択しない限り、すべてが魅力的に機能します。そうしてから div の別の場所をクリックすると、ツールチップがフェードアウトして再びフェードインします。

この動作の例は、http: //jsfiddle.net/7NEk3/275/にあり ます。イベントは次のようにコーディングされています。

            $('#show-bubb-text').mouseup(function(e) {
                var selection = getSelected();
                if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, ''))) 
                {
                    selectionImage.attr('href', 
                    url.replace('{term}', encodeURI(selection))).css({
                        top: e.pageY - 30, //offsets
                        left: e.pageX - 13 //offsets
                    }).fadeIn();
                }
            });

            $(document.body).mousedown(function() {
                selectionImage.fadeOut();
            });

  1. たとえば「CREATE A LOGO」を選択すると、ツールチップがフェードインし、div の別の場所をクリックするとツールチップがフェードアウトします。

  2. テキストのチャンク全体、つまり「SMS」から「/」までを選択します。ツールチップは期待どおりに表示されますが、選択部分または選択されていない部分をクリックすると、ツールチップがフェードアウトして元に戻ります。

これは予想される動作ですか？私は何を間違っていますか？

編集:これは Firefox でうまく動作するようです。ただし、Chrome や Safari では機能しません。

4

1 に答える 1

0

これは、アクティブな選択範囲内をクリックしたときに発生しています。任意の選択を行い、アクティブな選択内をクリックすることで、これを再現できます。この理由は、イベントが呼び出される順序によるものです。「getSelection」関数を呼び出す前に、アクティブな選択はクリアされません。したがって、「マウスアップ」の直後に選択がクリアされても、アプリケーションはアクティブな選択を検出しています。

解決策の 1 つは、「mousedown」で選択をクリアすることです。何かのようなもの：

function clearSelection() {
    if ( document.selection ) {
        document.selection.empty();
    } else if ( window.getSelection ) {
        window.getSelection().removeAllRanges();
    }
}

次に、「mousedown」機能で：

$(document.body).mousedown(function() {
     clearSelection();
     selectionImage.fadeOut();
});
于 2013-02-25T17:26:48.313 に答える