70

jqueryを使用して機能するサブナビゲーションがあります-ユーザーがトップレベルのリストアイテムをクリックします。たとえば、ドロップダウンをトリガーする「サービス」などです。ドロップダウンは、「サービス」リンクをクリックして切り替わります。ユーザーが画面上の任意の場所をクリックして、ドロップダウンを閉じた状態に切り替えることができるようにしました。しかし、サイトはレスポンシブなので、ユーザーが画面上の任意の場所をクリック（タッチ）してドロップダウンを閉じることができるようにしたいのですが、私の問題は、タッチデバイスで機能しないことです。

ドキュメントクリックのコードの設定は次のとおりです。

$(document).click(function(event) { 

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});

document.clickがタッチデバイスで機能しない可能性があると想定していますが、機能しない場合、同じ効果を実現するための回避策はありますか？

ありがとう

4

6 に答える 6

171

アップデート！最近のブラウザでは、クリックイベントはタップに対して発生するため、必要に応じてイベントを追加する必要はありませtouchstartん。touchendclick

この以前の回答は、タップが特別だと思っていたブラウザでしばらくの間機能していました。もともとは、実際には標準化されなかった「タッチ」イベントが含まれていました。

問題がない限り：

$(document).on('click', function () { ... });

何も変更する必要はありません！

以前の情報、削除するために更新touch...

クリックまたはタッチで機能をトリガーするには、次のように変更できます。

$(document).click( function () {

これに：

$(document).on('click touchstart', function () {

touchstart要素に触れるとすぐにイベントが発生するため、状況によっては使用する方が適切な場合がありますtouchend。

于 2012-07-09T15:21:05.490 に答える
52

タッチスタートまたはタッチエンドは適切ではありません。ページをスクロールすると、デバイスが処理を実行するためです。したがって、要素の外側をタップまたはクリックしてウィンドウを閉じ、ウィンドウをスクロールしたい場合は、次のようにします。

$(document).on('touchstart', function() {
    documentClick = true;
});
$(document).on('touchmove', function() {
    documentClick = false;
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") documentClick = true;
    if (documentClick){
        doStuff();
    }
 });
于 2014-09-08T15:16:10.677 に答える
4

jqTouchまたはjquerymobileを使用できますか？そこでは、タッチイベントの処理がはるかに簡単になります。そうでない場合は、タッチデバイスのクリックをシミュレートする必要があります。次の記事に従ってください。

iphone-touch-events-in-javascript

タッチデモ

このスレッドの詳細

于 2012-07-09T14:52:02.917 に答える
2

どこにでも適用するには、次のようなことを行うことができます

$('body').on('click', function() {
   if($('.children').is(':visible')) {
      $('ul.children').slideUp('slow');
   }
});
于 2012-07-09T14:43:33.477 に答える
2

上記のように、を使用'click touchstart'すると目的の結果が得られます。ただし、クリックした場合console.log(e)、jqueryがタッチをクリックとして認識すると、クリックとタッチスタートから2つのアクションが得られることがあります。以下の解決策は私のために働いた。

//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
    deviceEventType = 'click'
}

$(document).on(specialEventType, function(e){
    //code here
});
于 2018-01-10T20:03:08.733 に答える
1

承認された回答には、クリックが実装されている場合にタッチスタートがクリックを呼び出さないようにするための本質的な戻り値falseが含まれていません。これにより、ハンドラーtwoceが実行されます。

行う：

$(btn).on('click touchstart', e => { 
   your code ...
   return false; 
});
于 2019-03-20T05:26:20.287 に答える