[解決済み] iPhoneで$(document).click()が正しく動作しない。
2022-10-31 06:46:28
質問
この機能はIE、Firefox、Chromeでは完璧に動作しますが、iPhoneでは
<img>
. ページ上(img以外)をクリックしてもイベントは発生しません。
$(document).ready(function () {
$(document).click(function (e) {
fire(e);
});
});
function fire(e) { alert('hi'); }
HTML部分は極めて基本的なものであり、問題ないはずです。
何かアイデアはありますか?
どのように解決するのですか?
以下のコードを追加すると動作します。
問題は、iPhoneはクリックイベントを発生させないということです。彼らは "touch" イベントを発生させます。ありがとうございます、Apple。なぜ他の人たちのように標準のままにしておくことができなかったのでしょうか? とにかく、ヒントをくれた Nico に感謝します。
クレジットに http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript
$(document).ready(function () {
init();
$(document).click(function (e) {
fire(e);
});
});
function fire(e) { alert('hi'); }
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
関連
-
[解決済み] アンカーのonClick()処理にjQuery clickを使用する。
-
[解決済み] jQuery の jquery-1.10.2.min.map が 404 (Not Found) を誘発する。
-
[解決済み] このjQueryのクリック機能はなぜ動作しないのでしょうか?
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
-
[解決済み】Rails 4:ターボリンクで$(document).ready()を使用する方法
-
[解決済み】jQueryのクリックイベントが複数回発生する件
-
[解決済み] ブラウザがファイルのダウンロードを受信したことを検出する
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる