web-dev-qa-db-ja.com

iOSデバイスでクリックをタッチスタートに置き換える方法

目的

クリックしたときにアンカータグの親divを閉じる。以下のコードでは、ユーザーがアンカータグをクリックしたときにdiv performance_ttを非表示にしますclose_performance_tt。

問題

数時間使用した後、iOSデバイスで動作させることができません。 BlackBerry 10デバイスを含め、他のすべてで正常に動作します。

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
    <div>Website performance has become an important consideration for most sites.
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
    As a result, creating a system that is optimized for fast responses and low latency is key.</div>
    <a id="close_performance_tt" href="#">Close</a>
    <script>
    var userAgent = navigator.userAgent.toLowerCase();
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
    if (isiOS) {
        $("#close_performance_tt").bind('touchstart', function() {
            alert('Touch-start event triggered');
        });
    } else {
        $("#close_performance_tt").bind('click', function() {
            alert('Click event triggered');
        });
    }
    </script>
</div>
jqueryipadclicktouchstart
8
KalC

後で使用できるクリックハンドラーを定義します。

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

これにより、非タッチデバイスでクリックがトリガーされ、タッチデバイスでタッチスタートがトリガーされます。

その場合は、代わりに 高速クリック を使用し、通常のクリックイベントを使用することを強くお勧めします。上記の解決策では、たとえばページをスクロールするためにリンクをスワイプすると、リンクで「タッチスタート」がトリガーされます。これは理想的ではありません。

16
curly_brackets

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html を参照してください。

クリックなどのiOSマウスイベントの場合、次の場合を除いてバブしないでください。

  • イベントのターゲット要素は、リンクまたはフォームフィールドです。
  • ターゲット要素、またはまでの、ただしそれを含まないその祖先のいずれかには、マウスイベントのいずれかに設定された明示的なイベントハンドラーがあります。このイベントハンドラーは空の関数である可能性があります。
  • ターゲット要素、またはドキュメントまでのその祖先のいずれかにカーソルがあります：ポインタCSS宣言。

私にとって最も簡単な解決策は、iOS touchデバイスの場合、どこにでもcursor: pointerを適用することです。カーソルがないため、視覚的な影響はありません

2
Sebastien Lorber

IOSでは、aタグはクリック可能な要素であるため、リンクをタッチすると、マウスイベント（clickを含む）がトリガーされます。

このコード

$("#close_performance_tt").bind('click',function() { 
    alert('Click event triggered');                             
});

iOSで正常に動作します。

詳細情報： http://developer.Apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

2
BMH