タグ付けされた質問 「touch」

タッチベースのインターフェイスには、他の入力モードには適用されない独自の考慮事項があり、その逆も同様です。

17
モバイルブラウザーのホバー効果を無効にする
デスクトップとタブレットの両方から使用することを意図したWebサイトを書いています。デスクトップからアクセスしているときに、画面のクリック可能な領域を:hover効果(異なる背景色など)で明るくしたいのですが、タブレットではマウスがないため、ホバー効果は必要ありません。 問題は、タブレット上で何かをタップすると、ブラウザには明らかに「見えないマウスカーソル」があり、タップした場所に移動してそこにそのまま残します。つまり、タップしたものがライトで点灯します何かをタップするまでホバー効果。 マウスを使用しているときにホバー効果を取得し、タッチスクリーンを使用しているときにホバー効果を抑制するにはどうすればよいですか? 誰かがそれを提案することを考えていた場合、私はユーザーエージェントのスニッフィングを使いたくありません。同じデバイスにタッチスクリーンとマウスの両方を搭載することもできます(今日はそれほど一般的ではないかもしれませんが、将来的にはさらに普及するでしょう)。このデバイスには興味がありません。現在どのように使用されているか(マウスやタッチスクリーン)に興味があります。 私はすでにフックしようとしたtouchstart、touchmoveとtouchendのイベントをして呼び出すpreventDefault()抑制する「目に見えないマウスカーソル」時間の一部をしており、それらのすべてに。しかし、2つの異なる要素間をすばやく前後にタップすると、数回タップすると、「マウスカーソル」が移動し、ホバー効果が点灯しますpreventDefault。これは、常に光栄に思うわけではないようです。必要がない限り、詳細について退屈することはありません-それが適切なアプローチであるかどうかさえわかりません。誰かがより簡単な修正を持っている場合、私はすべて耳です。 編集:これは沼地標準のCSS :hoverで再現できますが、参考のために簡単に再現します。 <style> .box { border: 1px solid black; width: 150px; height: 150px; } .box:hover { background: blue; } </style> <div class="box"></div> <div class="box"></div> いずれかのボックスの上にマウスを置くと、青色の背景が表示されます。しかし、いずれかのボックスをタップすると、背景も青色になります。これは私が防止しようとしていることです。 上記を実行し、jQueryのマウスイベントをフックするサンプルもここに投稿しました。あなたはタップイベントも発火することを確認するためにそれを使用することができmouseenter、mousemoveそしてmouseleave。
113 javascript  hover  touch 

14
タッチデバイスのブラウザーでダブルタップ「ズーム」オプションを無効にする
すべてのズーム機能を無効にすることなく、ブラウザーの指定された要素(タッチデバイス上)のダブルタップズーム機能を無効にしたい。 例:何かが発生するために、1つの要素を複数回タップすることができます。これはデスクトップブラウザーでは(期待どおり)正常に動作しますが、タッチデバイスブラウザーではズームインします。
112 html  browser  touch  zoom 

6
Androidのイベント処理メソッドから返されるブール値の意味は何ですか
Androidでは、ほとんどのイベントリスナーメソッドがブール値を返します。その真/偽の値はどういう意味ですか?それがその後の出来事に何をもたらすでしょうか? class MyTouchListener implements OnTouchListener { @Override public boolean onTouch(View v, MotionEvent event) { logView.showEvent(event); return true; } } 上記の例に関して、onTouchメソッドでtrueを返すと、すべてのタッチイベント(DOWN、UP、MOVEなど)がlogViewに従ってキャプチャされていることがわかりました。逆に、falseが返された場合、1つはDOWNイベントがキャプチャされたことです。したがって、falseを返すと、イベントの伝播が妨げられるようです。私は正しいですか? さらに、OnGestureListenerでは、多くのメソッドもブール値を返す必要があります。同じ意味ですか?

5
クリックイベントと同様に、「touchstart」イベントのe.PageX位置に相当するものはありますか?
ライブ機能で使用されるtouchstartイベントのjQueryでX位置を取得しようとしていますか? すなわち $('#box').live('touchstart', function(e) { var xPos = e.PageX; } ); 現在、これは「クリック」をイベントとして機能します。どうすれば(アルファ jQuery Mobile を使用せずに)タッチイベントで取得できますか? 何か案は? 助けてくれてありがとう。

18
要素がアクティブ化されたときにindexpath.rowを取得するにはどうすればよいですか?
ボタン付きのテーブルビューがあり、そのうちの1つがタップされたときにindexpath.rowを使用したいと思います。これは私が現在持っているものですが、常に0です。 var point = Int() func buttonPressed(sender: AnyObject) { let pointInTable: CGPoint = sender.convertPoint(sender.bounds.origin, toView: self.tableView) let cellIndexPath = self.tableView.indexPathForRowAtPoint(pointInTable) println(cellIndexPath) point = cellIndexPath!.row println(point) }

2
モバイルデバイスでのjQuery UIスライダーのタッチとドラッグ/ドロップのサポート
私はすでにプロジェクトにjQuery UIスライダーをスタイルして実装しました。スライダーは反応しますが、タッチしたりドラッグしたりしても反応しません。代わりに、スライダーを動かしたい場所にタッチする必要があります。既にjQuery(非モバイル)UIを広く使用しているため、タッチとドラッグをサポートするjQueryモバイルUIへの切り替えを避けたいと思います。 必要な機能: ここ 使用しているもの:ここ デスクトップでは違いがわかりません。モバイルデバイスでは明らかです。 誰でもこのサポートをjquery UIに追加する方法を知っていますか? $("#videographers").slider({ value: 2, min: 1, max: 3, step: 1, slide: function(event, ui) { return calcTotal(ui.value); } });

4
タッチデバイスのjQuery UIスライダー
jQuery UIを使用してWebサイトを開発していますが、タッチスクリーンデバイスで表示すると互換性がないように見えるサイトの要素がいくつかあります。エラーは発生しませんが、動作は本来あるべきものではありません。 問題の要素は、jQuery UIで定義されているスライダーと範囲スライダーです。タッチスクリーンでは、ハンドルをつかんでタッチを登録し、スライダーを横切ってハンドルをドラッグしてドラッグを登録する代わりに、Webページ全体を画面の端にスライドさせます。ハンドルをタップしてから、スライダーのハンドルを配置する場所をタップすると機能しますが、これは非常に遅く、理想的ではありません。何か案は? jqtouchプラグインをダウンロードして、.touch([...])slider()とrangeslider()へのすべての呼び出しにアタッチしようとしましたが、うまくいきませんでした。 ありがとう! 更新:jQuery UI Webサイトでこの「パッチ」を見つけました http://bugs.jqueryui.com/ticket/4143 それはiPhoneのスライダーを容易にすることを意味しますが、ここで別の愚かな質問があります:この「パッチ」をコードに組み込むにはどうすればよいですか?プラグインのようにコードの先頭に含めるだけですか?
95 slider  touch  jqtouch 

8
iOSの基本的なドラッグアンドドロップ
ユーザーがドラッグアンドドロップすることもできる運転中の車があるビューが欲しいです。これを行うための最良の大規模戦略は何だと思いますか?車両を表すビューから、またはより大きなビューからタッチイベントを取得するのが最善ですか?ドラッグアンドドロップに使用した、満足できる簡単なパラダイムはありますか?異なる戦略の欠点は何ですか?

3
要素をクリックできないようにする(その背後にあるものをクリックする)
ユーザーがタッチスクリーン(モバイル)をスクロールしているときにページをオーバーレイする固定画像があります。 その画像を「クリック不可」または「非アクティブ」などにしたいので、ユーザーがその画像をタッチしてドラッグした場合でも、画像がないかのようにその後ろのページがスクロールして、インタラクションが「ブロック」されます。 これは可能ですか?必要に応じて、私が言っていることを例示するスクリーンショットを提供することを試みることができます。 ありがとう!
92 html  css  mobile  scroll  touch 

10
モバイルSafariでクリックイベントの300ミリ秒の遅延を排除
モバイルSafariでは、リンク/ボタンがクリックされてからイベントが発生するまでのクリックイベントで300ミリ秒の遅延があることを読みました。遅延の理由は、ユーザーがダブルクリックするつもりかどうかを確認するために待機することですが、UXの観点からは、300ms待機することは望ましくありません。 この300ミリ秒の遅延を解消する1つの解決策は、jQuery Mobileの「タップ」処理を使用することです。残念ながら、私はこのフレームワークに精通しておらず、必要なものが1行または2行のコードをtouchend適切に適用するだけの場合は、大きなフレームワークをロードしたくありません。 多くのサイトと同様に、私のサイトには次のような多くのクリックイベントがあります。 $("button.submitBtn").on('click', function (e) { $.ajaxSubmit({... //ajax form submisssion }); $("a.ajax").on('click', function (e) { $.ajax({... //ajax page loading }); $("button.modal").on('click', function (e) { //show/hide modal dialog }); そして、私がしたいのは、次のような単一のコードスニペットを使用して、すべてのクリックイベントの300ミリ秒の遅延を取り除くことです。 $("a, button").on('tap', function (e) { $(this).trigger('click'); e.preventDefault(); }); それは悪い/良い考えですか?

4
カーソル:ポインタでオブジェクトをタッチ/プレスするときに青いハイライトを無効にする
Chromeでcursor:pointerプロパティが適用されているDivに触れると、青いハイライトが表示されます。どうすればそれを取り除くことができますか? 私は以下を試しました: -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; ただし、カーソルを押したときの青色の強調表示には影響しません。
83 html  css  mobile  touch  highlight 

4
タッチイベントを理解する
一部のライブラリをタッチデバイスで動作させようとしていますが、それらがどのようにサポートされ、どのように動作するかを理解するのに苦労しています。 基本的に5つのタッチイベントがありますが、モバイルブラウザ間ではtouchstartイベントについてのみコンセンサスがあるようです(duh)。テストケースとしてフィドルを作成しました。 Android4を搭載したGalaxyNoteでこれをテストしましたが、デスクトップブラウザでもリンクを確認できます。 目標は、タップ、ダブルタップ、およびロングタップの処理方法を理解することです。特別なことは何もありません。 基本的に、これは何が起こるかです: Androidの株式ブラウザはタッチイベントを発生しません。それはちょうどタップ、焼成してエミュレートマウスクリックにしようmousedown、mouseupとclick連続したイベントが、ダブルタップはちょうどthaのページズームイン、ズームアウト。 Chrome for Androidは、指が画面に触れるとタッチスタートイベントを発生させます。それはすぐに十分なリリースだ場合、それはその後、発火mousedown、mouseup、touchendそして最後clickのイベント。 ロングタップの場合、約0.5秒後に発火mousedownしmouseup、touchend指を離すとclick最後にイベントは発生しません。 指を動かすと、touchmoveイベントが数回発生し、その後touchcancelイベントが発生します。その後は何も発生せずtouchend、指を離してもイベントは発生しません。 ダブルタップ/アウトズーム機能のトリガーが、イベントごと、それはコンボ発動touchstart-touchevent二度は無いマウスイベントでは、解雇しました。 FirefoxのAndroid用は正しく発火touchstartイベントを、短いタップ火災の場合はmousedown、mouseup、touchendおよびclickその後。 ロングタップの場合、発砲しmousedown、mouseup最後にtouchendイベント。これらについてはChromeと同じです。 しかし、あなたがあれば、あなたの指を動かす火災があれば、touchmove継続的に(1が期待することとして)それはdoesnのない火touchleave指がイベントリスナーを持つ要素を離れたときにイベントをし、発生しませんtouchcancel指は、ブラウザのビューポートから外れたときに、イベントを。 以下のためにダブルタップ、それだけでクロームのように振る舞います。 Opera MobileはChromeとFirefoxと同じことを短いタップで実行しますが、長押しすると、本当に無効にしたいある種の共有機能がアクティブになります。指を動かしたり、ダブルタップしたりすると、Firefoxと同じように動作します。 Chromeベータ版は通常の短いタップで動作しますが、長いタップの場合はmouseupイベントを発生しなくなります。ちょうどtouchstart、mousedown0.5秒後touchend、指を離したときです。指を動かすと、FirefoxやOperaMobileのように動作するようになりました。 ダブルタップの場合、ズームアウト時にタッチイベントは発生しませんが、ズームインした場合にのみ発生します。 Chromeベータ版は最も奇妙な動作を示しますが、ベータ版なので文句は言えません。 問題は、タッチデバイスの最も一般的なブラウザでショートタップ、ロングタップ、ダブルタップを検出しようとする簡単で方法はありますか? 残念ながら、Safariを搭載したiOSデバイス、またはWindows Phone 7 / Phone 8 / RT用のIEでテストすることはできませんが、テストできる方がいらっしゃいましたら、フィードバックをいただければ幸いです。

4
反応ネイティブでタッチで形状をトレースする最も簡単な方法は?
反応ネイティブアプリで確認画面を表示しようとしています。ユーザーがアクションを確認するために楕円をトレースする必要があります。今夜のホテルのロゴと同じです。ユーザーにsvgをトレースさせるために使用できるライブラリはありますか? ユーザーが行うことの例を次に示します。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.