js での FastClick イベントのネイティブ実装の例
注: 私は長い間 JavaScript を学習していませんでしたが、最近、Web 上のモバイル Web ページと WeChat アプリケーションに取り組んでいたので、touchstart イベントと touchend イベントを使用してそれらをシミュレートしました。元のプログラムをカプセル化しようとしています。次の 2 つの問題の解決策が得られました。みんなで共有して、マスターに指導を求めてください
モバイル Web アプリ開発では、クリック イベントの 300 ミリ秒の遅延により、特にローエンド マシンで応答が遅くなります。 touchstart イベントまたは touchend イベントを使用すると、デフォルトのホイール イベントと競合しますが、これは予想外です。
そこで、私は自分でそれを行い、十分な衣食住を用意し、クイッククリックイベント用のネイティブjsコードを書きました(Webアプリの開発環境を考慮すると、IEなどのブラウザとの互換性を考慮する必要はありません)。当面)。
実装方法1は以下の通りです:
function FastClickEvent(handler){ var fastclick = { handler : handler, bind : function(query){ var targetList = document.querySelectorAll(query); for(var i=0,len=targetList.length;i<len;i++) { targetList[i].addEventListener('touchstart',handleEvent); targetList[i].addEventListener('touchend',handleEvent); } }, unbind : function(query){ var targetList = document.querySelectorAll(query); for(var i=0,len=targetList.length;i<len;i++) { targetList[i].removeEventListener('touchstart',handleEvent); targetList[i].removeEventListener('touchend',handleEvent); } } } var touchX = 0 ,touchY = 0; function handleEvent(event){ switch(event.type) { case 'touchstart': touchX = event.touches[0].clientX; touchY = event.touches[0].clientY; break; case 'touchend': var x = event.changedTouches[0].clientX; var y = event.changedTouches[0].clientY; if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5) fastclick.handler(event); break; } }; return fastclick; };
原理:タッチスタートイベントとタッチエンドイベントが連続発生した時の位置の変化に基づいてクリックかどうかを判定します
Call:ハンドラー関数を使用してFastClickEventを登録しますイベント。次に、bind メソッドを使用して、登録された FastClickEvent イベントを対応する要素にバインドします。次のように:
var handler = function(event){ console.log(event.target.id+" fastclicked"); } var fastClick = new FastClickEvent(handler); fastClick.bind("div");
このコードでは、すべての div 要素に対して fastclick ハンドラー イベントを登録します。 fastClick.unbind を呼び出して要素のバインドを解除します。
しかし、handleEvent イベントが touchX、touchY にアクセスできるようにするには、このコードには問題があります。クロージャ メソッドを使用しました。これは、新しい FastClickEvent イベント オブジェクトが作成されるたびに、繰り返し handleEvent 関数をメモリに挿入する必要があることを意味します。 touchXとtouchYの繰り返しについては、言うまでもありません。
初心者向けヘルプ: 元々は handleEvent 関数をプロトタイプに書きたかったのですが、handleEvent (イベント) のこのオブジェクトが Windows であるという問題が発生します。つまり、touchX、touchY、およびハンドラーを取得できないということです。オブジェクトが存在し、アクセス エラーが発生します。
比較的単純な解決策があります。それは、fastClickEvent イベントを 1 つだけ登録し、event.target (つまり、イベントが発生するオブジェクト) の実際の値に基づいてハンドラー内の応答コンテンツを決定することです。
ただし、これは、すべての fastclick イベントに精通している必要があることを意味します。
このメソッドを使用する利点は、handleEvent 関数が 1 つしかないため、基本的に、fastclick イベントを再度トリガーしたくない場合を除き、ページがリリースされる前に、要素の fastclick イベントのバインドを解除する必要がないことです。 (バインドを解除した場合でも、ハンドラー関数はメモリ内にまだ存在します)。さらに、対応するハンドラーをハンドラー関数に記述していれば、bind(query) を使用して、動的に生成された要素の fastclick イベントを簡単に追加できます。
複数の fastclick イベントを追加し、それらを複数の場所に登録する必要がある場合は、新しい FastClickEvent オブジェクトを作成して、対応する要素にバインドするだけです。
以下はEventTargetクラスの利用方法です。まず、カスタム クラスの追加、削除、実装に使用されるインターフェイスである EventTarget
function EventTarget(){ this.handlers = {}; } EventTarget.prototype = { constructor: EventTarget, addHandler : function(type,handler){ if(typeof this.handlers[type] == "undefined"){ this.handlers[type]=[]; } this.handlers[type].push(handler); }, fire : function(event){ if(!event.target){ event.target = this; } if(this.handlers[event.type] instanceof Array){ var handlers = this.handlers[event.type]; for(var i=0,len=handlers.length;i<len;i++){ handlers[i](event); } } }, removeHandler : function(type,handler){ if(this.handlers[type] instanceof Array){ var handlers = this.handlers[type]; for(var i=0,len=handler.length;i<len;i++){ if(handlers[i]==handler){ break; } } handlers.splice(i,1); } } }
クラスを見てみましょう。 『JavaScript Advanced Programming Third Edition』P616-617 を参照してください
それでは、このクラスを fastclick イベント インターフェイスに変えるにはどうすればよいでしょうか?
グローバル変数を定義し、この変数を使用してすべての fastclick イベントの登録、削除、追加を完了します
var FastClick = function(){ var fastclick = new EventTarget(), touchX = 0 , touchY = 0; function handleEvent(event){ switch(event.type) { case 'touchstart': touchX = event.touches[0].clientX; touchY = event.touches[0].clientY; break; case 'touchend': var x = event.changedTouches[0].clientX; var y = event.changedTouches[0].clientY; if(Math.abs(touchX-x)<5||Math.abs(touchY-y)<5) fastclick.fire({type:'fastclick',target:event.target}); break; } }; fastclick.bind = function(query) { var targetList = document.querySelectorAll(query); for(var i=0,len=targetList.length;i<len;i++) { targetList[i].addEventListener('touchstart',handleEvent); targetList[i].addEventListener('touchend',handleEvent); } } Fastclick.unbind = function(query){ var targetList = document.querySelectorAll(query); for(var i=0,len=targetList.length;i<len;i++) { targetList[i].removeEventListener('touchstart',handleEvent); targetList[i].removeEventListener('touchend',handleEvent); } } return fastclick; }();
このグローバル変数 FastClick を使用して、あらゆる fastclick イベントを追加できます。
呼び方について話しましょう。
イベント関数の追加:
FastClick.addHandler('fastclick',function(event){});
イベント関数の削除: //匿名イベントは削除できません
FastClick.removeHandler('fastclick',handler);
要素のバインディング
FastClick.bind("div");
Unbinding
FastClick.unbind("div");
このメソッドを使用して、ハンドラー イベントのevent.targetを予測する必要もあります。このメソッドでは複数の fastclick イベントを追加できますが、実行中にイベントが 1 つずつ順番に実行されるため、実行したくない機能が実行される可能性があります。
の利点は、複数の fastclick イベントを登録し、再度バインドすることなく実行できることです。
例:
FastClick.bind("div"); FastClick.addHandler(handler1); FastClick.addHandler(handler2);
そして、いずれかの div 要素でクイッククリックイベントが発生すると、handler1 と handler2 が順番に実行されます。
removeHandler を呼び出して handler1 または handler2 を削除すると、対応する関数は実行されなくなります。
さらに、ハンドラー関数では、このオブジェクトは配列 FastClick.handlers['fastclick'] であることに注意してください。通常、イベントが発生したオブジェクトを取得するには、event.target を使用します。
このメソッドを使用すると、基本的に上記のメソッドの問題を克服できます。さらに、event.target を予測して大量の FaskClick クラスを生成したくない場合を除き、このオブジェクトに対して new を繰り返すことはあまり意味がありません。効率的ではありません。
初心者向けヘルプ: 特定の要素のバインディング実行関数を実装するにはどうすればよいですか。つまり、FastClick.bind(query,handler); を呼び出して、クエリ条件を満たす要素にハンドラーを追加する fastclick イベントを実装できます。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JS と Baidu Map を使用してマップ パン機能を実装する方法 Baidu Map は広く使用されている地図サービス プラットフォームで、Web 開発で地理情報、位置情報、その他の機能を表示するためによく使用されます。この記事では、JS と Baidu Map API を使用してマップ パン機能を実装する方法と、具体的なコード例を紹介します。 1. 準備 Baidu Map API を使用する前に、Baidu Map Open Platform (http://lbsyun.baidu.com/) で開発者アカウントを申請し、アプリケーションを作成する必要があります。作成完了

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備 開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3

JS と Baidu Maps を使用して地図ポリゴン描画機能を実装する方法 現代の Web 開発において、地図アプリケーションは一般的な機能の 1 つになっています。地図上にポリゴンを描画すると、ユーザーが表示および分析できるように特定のエリアをマークするのに役立ちます。この記事では、JS と Baidu Map API を使用して地図ポリゴン描画機能を実装する方法と、具体的なコード例を紹介します。まず、Baidu Map API を導入する必要があります。次のコードを使用して、Baidu Map API の JavaScript を HTML ファイルにインポートできます。

JS と Baidu Maps を使用してマップ ヒート マップ機能を実装する方法 はじめに: インターネットとモバイル デバイスの急速な発展に伴い、マップは一般的なアプリケーション シナリオになりました。視覚的な表示方法として、ヒート マップはデータの分布をより直観的に理解するのに役立ちます。この記事では、JS と Baidu Map API を使用してマップ ヒート マップ機能を実装する方法と、具体的なコード例を紹介します。準備作業: 開始する前に、次の項目を準備する必要があります: Baidu 開発者アカウント、アプリケーションの作成、対応する AP の取得

JS と Baidu Maps を使用してマップ クリック イベント処理を実装する方法の概要: Web 開発では、地理的位置と地理情報を表示するためにマップ関数を使用することが必要になることがよくあります。マップ上のクリック イベント処理は、マップ機能の一般的に使用される重要な部分です。この記事では、JS と Baidu Map API を使用して地図のクリック イベント処理機能を実装する方法と、具体的なコード例を紹介します。手順: Baidu Map の API ファイルをインポートします。まず、Baidu Map API のファイルを HTML ファイルにインポートします。これは、次のコードによって実現できます。
