iOSのモバイルSafariからクリック/タップの遅延を削除するにはどうすればよいですか？速度の修正：jQueryモバイルアプリケーションで300msの遅延を取り除く方法
私はイベントリスナーをかなり抱いていて、さまざまなスクリプト（例：Lightning Touch）を喜んで使用していません。いくつかの解決法がありますが、これらのタイプのスクリプトは、DOM上のすべてのリンクに宛先要素をコード化するよう強制します。これは残念ながら、私にとってはうまくいかない、いくつかの速い遷移とゆっくりとした遷移を引き起こす可能性があります。
私はついには不断の検索後、私のスピード悲哀への答えを見つけて、それが（this threadが、他のユーザーからのコメントでは、いくつかの調整と一緒に、非常に詳細に入る）FastClickの形式で提供されます。
FastClick.jsスクリプトを組み込み、onLoadリスナーを追加し、<body>コンテンツをスパンでラップすると、アプリのネイティブ感がさらに増します。
のonLoadリスナー：<body onLoad="initFastButtons();">
スパンラップ：
<body onLoad="initFastButtons();">
<span id="fastclick">
[...]
</span>
</body>
FastClick.js
//======================================================== FASTCLICK
function FastButton(element, handler) {
this.element = element;
this.handler = handler;
element.addEventListener('touchstart', this, false);
};
FastButton.prototype.handleEvent = function(event) {
switch (event.type) {
case 'touchstart': this.onTouchStart(event); break;
case 'touchmove': this.onTouchMove(event); break;
case 'touchend': this.onClick(event); break;
case 'click': this.onClick(event); break;
}
};
FastButton.prototype.onTouchStart = function(event) {
event.stopPropagation();
this.element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
isMoving = false;
};
FastButton.prototype.onTouchMove = function(event) {
if(Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
this.reset();
}
};
FastButton.prototype.onClick = function(event) {
this.reset();
this.handler(event);
if(event.type == 'touchend') {
preventGhostClick(this.startX, this.startY);
}
};
FastButton.prototype.reset = function() {
this.element.removeEventListener('touchend', this, false);
document.body.removeEventListener('touchmove', this, false);
};
function preventGhostClick(x, y) {
coordinates.push(x, y);
window.setTimeout(gpop, 2500);
};
function gpop() {
coordinates.splice(0, 2);
};
function gonClick(event) {
for(var i = 0; i < coordinates.length; i += 2) {
var x = coordinates[i];
var y = coordinates[i + 1];
if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
};
document.addEventListener('click', gonClick, true);
var coordinates = [];
function initFastButtons() {
new FastButton(document.getElementById("fastclick"), goSomewhere);
};
function goSomewhere() {
var theTarget = document.elementFromPoint(this.startX, this.startY);
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
theTarget.dispatchEvent(theEvent);
};
//========================================================
これは私のために働いています。新しいページがDOMに追加されるたびに、我々は、すべてのリンクに速いクリックを添付することができます...
// when new pages are loaded into the DOM via JQM AJAX Nav, apply ko bindings to that page's DOM
$(document).on('pageinit', '.ui-page', function (event, data)
{
var activePage = $(event.target).get(0);
FastClick.attach(activePage);
});
Ben Howdleは最近、かなりシンプルかつエレガントな方法でこの問題に対処するオープンソースプロジェクトTouche.jsを作成しました。この問題の解決策を探している人は、見てみる価値があるかもしれません。
MikeZ勧告に直接コメントを投稿することはできません。
私はそれをうまく使っていましたが、特に2つの追加のtweekを必要としました。代わりにgonClickでevent.preventDefault();を呼び出す
は（）、私はまた、そのようなパネルなどの動的な要素は、要素の上に開いているときは特に、あなたがクリックしたそうでなければ、あなたがトラブルに実行される可能性
event.stopImmediatePropagation();を呼び出す必要がありました。
MikeZ溶液で使用される完全gonClick（）メソッド：
function gonClick(event) {
for (var i = 0; i < coordinates.length; i += 2) {
var x = coordinates[i];
var y = coordinates[i + 1];
if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
event.stopImmediatePropagation();
}
}
};
は、誰もが非JS集約型のソリューションが発生しましたか？おそらく、cssのポインタイベントを使用して：なし; ？ – JackMahoney
fastclick **完全に** jquery draggableで失敗する – 8DK