jQueryは長押しボタントリガーevent_jqueryを実装します-jsチュートリアル-php.cn

jQueryは長押しボタントリガーevent_jqueryを実装します

WBOY

リリース： 2016-05-16 16:16:14

オリジナル

1676 人が閲覧しました

この記事の例では、jQuery がボタンの長押しイベントをトリガーする方法を実装する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

携帯電話の急速な発展により、多くの携帯電話のジェスチャーをモバイル Web ページに組み込むことが必要になりました

インターネット上には長押しボタンのプラグインが多数あり、jQuery Mobile にも長押しイベントがあります

しかし、さまざまな互換性の問題により、

長押しアクションの実装には jquery のみを使用してください。これにより、携帯電話とコンピューターの間の強力な互換性が維持されます

1. 基本的な目標

ボタンを作成します。これは基本的に 100x100 ピクセルの灰色の背景を持つレイヤーであり、ボタンを 2 秒間押し続けると、レイヤー内のテキストがインからアウトに変わります。以下に示すように:

2. 製造工程

コードは次のとおりです:

コードをコピーコードは次のとおりです:

無題のドキュメント

アウト

<スクリプト> 

/*長押しタイマーを設定します。このレイヤーが 2 秒以上クリックされると、mydiv 内のテキストが out から in に変わります*/ 

var タイムアウト 

$("#mydiv").mousedown(function() { 

タイムアウト = setTimeout(function() { 

$("#mydiv").text("in");
}、2000);

}); 

$("#mydiv").mouseup(function() { 

ClearTimeout(タイムアウト) 

$("#mydiv").text("out");
}); 

$("#mydiv").mouseout(function() { 

ClearTimeout(タイムアウト) 

$("#mydiv").text("out");
}); 

本質的に、長押し時間は、携帯電話システムの長押しジェスチャと競合する可能性があるため長すぎてはなりませんが、長押し時間とクリックには違いがないため、短すぎてもいけません。 

理論的には、長押しの終了を判断するには、携帯電話でマウスアップ アクションを設定するだけです。

ただし、PC でマウスアップを設定する場合のみ、次のバグが発生します:

レイヤー上のテキストを長押ししたままマウスをレイヤーの外にドラッグすると、システムのマウスアップ判定を回避できます。もちろん、完全に書き込まれている場合、この動作は携帯電話では実現できません。携帯電話上の Web ページの場合、この手順は完全に無視できますが、互換性を高めるために、このバグを修正するためにマウスアウトアクションが追加されています。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。