誤ってリンクに触れないようにするためのページのスライド

問題
最近、プロジェクトで非常に奇妙な問題が発生したので、それを取り出して共有します。文学的なスキルが低いため、理由はこの記事で説明したのと同じなので、ここでは言語を整理しません。直接コピーします。元の住所

1.質問:モバイルデバイスの画面をすばやくスクロールし、クリックしてスクロールを停止します。クリックして別のページにジャンプするときに、誤ってタグに触れないようにするにはどうすればよいですか?

2.これは、モバイル端末のフロントエンド開発で実際に発生する問題でもあります。詳細には、通常の状況では、現在のページのコンテンツが多く、高さが高い場合、スクロールバーが表示される場合、手を使用した場合画面をスライドさせると、画面のページコンテンツがすばやくスクロールし、手が画面を離れたために停止しません。このとき、スクロールをやめたいときは、画面をやさしくタップして停止します。ただし、現時点では問題があり、画面でクリックした場所にラベルやボタンが表示されている場合は、この時点で次のルートを入力するのは簡単です。mdnのスクロールイベントに関するいくつかの説明を確認しましたが、スクロールプロセスの速度と停止反応時間についての説明がありません。
解決策
特定の解決策のない記事をたくさん見つけましたが、後で記事に触発されてこの問題を解決しました。コードを貼り付けます。

$(function(){
//スライドする長いリストを処理するとき、ページをクリックしてページを強制的に停止すると、ページにリンクがトリガーされる場合があります
  var count = 0、
    timer = null;
  var oldTop = newTop = $(window).scrollTop() ;

  function log(){
    if(timer)clearTimeout(timer);
    newTop = $(window).scrollTop();
    console.log(++ count、oldTop、newTop);
    if(newTop === oldTop){//ページ操作の実行を停止
      $( "a")。RemoveAttr( "onclick"); 
      clearTimeout(timer);
    } else {
      oldTop = newTop;
      timer = setTimeout(log、100);
      $( "a")。Attr( "onclick 「」リターン偽「); //ページがまだ動作をローリングされる
    }
  }
  ; $(ウィンドウ).on( 『touchmove』、ログ)
});

原則
原則は、ページがまだローリングでの圧延されているかどうかを決定することで、スクロールの場合、クリック要素はfalseを返し、クリックを禁止します。それ以外の場合は、クリック操作を放します。私のページルーティングジャンプの多くは、aのhrefを使用しているので、これを記述します。使用できる場合は、別のラベルに変更できます。
スクリーンショット:スクロールページのタブにクリックイベントを禁止する操作があることがわかります。ページが停止すると、禁止されている操作は削除されます。

より良いコメントや提案があれば、私にメッセージを残してください、ありがとう〜

51件の元の記事を公開 19件の賞賛 60,000回以上の閲覧

おすすめ

転載: blog.csdn.net/qq_40999917/article/details/104623290