0

私は現在、ユーザーがページ上でマウスをドラッグする方法に応答する jquery と css3 を使用して、趣味のプロジェクトとして Web ページに取り組んでいます。ここに私がどのように取り組んだかの要約がありますので、あなたは私の本当の問題を理解することができます.

ページの下部にセンサーとして機能する div があります。この要素をクリックしてマウスでドラッグすると、いくつかのアニメーション (主にトランジションで再生) がメイン ページで再生されます。 

<div class="someclass"></div>

Jクエリ

$someclass = $('.someclass');

$someclass.mouseenter(function() {


//do something
 $someclass.mousedown(function(ed) {
   //several things with ed.pageX, ed.pageY coordinates

  $someclass.mousemove(function(em){
      //plenty of things with em.pageX, em.pageY coordinates
});

 }).mouseup(function() {
$someclass.unbind('mousdown');
});

 }).mouseleave(function(){

       $someclass.unbind('mouseenter');

});

これはクリックとドラッグが集中するため、一部のテキスト要素が強調表示されることを除いて、すべて正常に機能します。ネットで解決策を探しましたが、他の回答で提案されているように、マウスダウンに preventDefault() を使用してもうまくいきません。mousedown() イベントでは何もできないので、私はそれを望んでいませんでした。

CSS で ::selection を使用し、背景を透明に設定しても、必要な結果が得られません。テキストはまだ強調表示されたままです。

一部の人が提案したcssのユーザー選択を無効にして遊んでみましたが、それは私の人生で別の日を無駄にしました。

だから私はハックを考えました。div を使用する代わりに、入力フィールドを使用しました。

テキストフィールドをクリックしてその外側にドラッグすると、ページ上の他のテキストは選択されないことを私は知っています.まあ、明らかに。だから私は先に進み、変更を加え、すべてがうまくいきました!

しかし、問題が 1 つあります。この入力フィールドをクリックしてドラッグすると、最初のクリックにのみ焦点が当てられます。アニメーションを機能させるには、もう一度クリックしてドラッグする必要があります。ドキュメントの準備ができたら $someclass.focus() を試してみましたが、同様にフォーカスされますが、入力フィールドを物理的にクリックしない限り、mousemove() の検出を拒否します。

$someclass.mouseenter() で $someclass.mousedown() をトリガーしました。ここで、この要素で leave を入力して再度入力すると、クリックしてドラッグでき、すべてのアニメーションが機能します。したがって、この場合、テキスト フィールドを 2 回クリックする必要はありません。

mouseenter、mouseleaveなど、これの複数の組み合わせをトリガーして、マウスの助けなしにこの愚かなテキストに焦点を合わせようとしました。

しかし、私はこれが適切に機能することを望みます。私は mouseenter() で作業する必要があると推測していますが、試してみて燃え尽きました。誰かがこの方法を使用しているかどうかを調べましたが、探しているものに近いものは何もありません.

よろしくお願いします。

乾杯！

4

1 に答える 1

1

次のように、背景を none に設定する必要があります。

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

これで動作するはずです。

これを行うより良い方法は次のとおりです。

.[your div class] {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.[your div class] input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }
于 2013-04-04T07:23:27.537 に答える