1

私はJavaScriptプログラミングの初心者ですが、進歩しています! 私は、自閉症の子供向けに、タッチ スクリーン ブラウザ (55 インチのタッチ スクリーン PC および Nexus 7 タブレット) 用の Web アプリを社内で開発しています。最も互換性が高いと思われる Firefox のみを使用します。子供たちは画像の「ボタン」をクリックして、選択を行い、彼らのニーズを伝える. ボタンは触れたときに視覚的なフィードバックを与える必要があります. 私はCSSのアクティブ状態を使用してこれを解決しました:

img { opacity:1.0 };
img:active { opacity:0.4 };

これはうまくいきます。ホバーは、タッチ スクリーンでの使用には適していません。また、一部の画像を非表示にする必要がありますが、その場所にとどまり、長押しでオンとオフを切り替える必要があります。このために、トグル機能とタイマー機能を見つけて組み合わせました。

JAVASCRIPT (<head>ページ内):

var t
function tog_vis(id) {
   var e = document.getElementById(id);
   if(e.style.opacity == 1 )
      e.style.opacity = 0 ;
   else
      e.style.opacity = 1 ;

HTML:

<img id="myimg" onclick="DoSomething();" onmousedown="t=setTimeout(function(){ tog_vis('myimg'); }, 1500);" onmouseup="clearTimeout(t);" src="images/img1.png">

問題は、アクティブ状態が onmousedown および onmouseup イベントによって引き継がれることです (これは両方ともクリック イベントの一部であるためだと読みました - 理にかなっています!)。 .

予想される/望ましい動作:

1.通常のクリックで画像の不透明度が 0.4 に変わり、離すと 1 に戻り、onclick リクエストを完了します。

2. 長いクリックで画像の不透明度が 0 になり、2 回目の長いクリックで不透明度が 1 に戻り、onclick イベントは発生しません。

アプリには最終的に、最初の動作を実行する必要がある @ 100 の類似画像が含まれますが、2 番目の動作は @ 10 個のボタンでのみ必要になるため、必要に応じて機能を個別にコーディングできます。私はまた、55 インチのタッチスクリーン (Windows 7) が img:active CSS に応答していないことを発見しました。そのため、これらは touchdown および touchup イベントに依存していると推測されますが、タブレットは非常に適切に動作します。

ここで何か助けていただければ幸いです。

ティム

4

1 に答える 1

1

このユースケースでは、css3 トランジションと小さな JavaScript を使用できます。このフィドルを見てください：http://jsfiddle.net/Ce8J5/

また、javascript/jquery を使用してホバーを実現することもできます。ホバー css ステートメントを削除し、追加の css クラスをいくつか定義して、javascript 経由で追加するだけです。

例えば

$("#element").mouseenter(function(){
$(this).addClass(".hover");
});

$("#element").mouseleave(function(){
$(this).removeClass(".hover");
});
于 2013-02-01T00:54:23.137 に答える