web-dev-qa-db-ja.com

iPhone WebアプリケーションでクリックイベントにjQueryを使用する方法

JQueryを単純なクリックイベントに使用すると、リンクに対してのみ機能します。スパンなどで機能させる方法はありますか？

$("span.clicked").live("click", function(e){alert("span clicked!")});

$("a.clicked").live("click", function(e){alert("link clicked!")});

SPANはSafariで機能しますが、モバイルSafari（iPhoneまたはiPad）では機能しませんが、Aタグは両方で機能します。

jqueryiphoneweb-applications
42
Gazzer

私もこれに苦労しました。多くのことをいじって問題を理解しようとした後、私は簡単な解決策に出会いました。

要素のcursorをpointerに設定すると、Jqueryのライブイベントとクリックイベントで再び魔法のように動作します。これは、CSSでグローバルに設定できます。

127
Plynx

「touchstart」および「touchend」イベントをリッスンする必要があります。 jQueryでリスナーを追加...

$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );

タッチスタートとタッチエンドをリッスンして、指が触れたときに対象となる要素が、指を離したときに対象とする要素と同じであることを確認できます。

私はおそらくそれを行うためのより良い方法があると確信していますが、そのshouldは動作します:)

編集：より良い方法があります！ https://stackoverflow.com/a/4910962/1694 を参照してください

27
Sam

'span'タグ（または 'a'タグ以外のもの）のcssプロパティがある限り、実際にはtouchstartまたはtouchendイベントを使用する必要はありません。

cursor:pointer

クリックが登録されます

21
MonOve

また、空のonclick属性を追加することにより、ブラウザを同軸にしてクリックイベントを生成することもできます。特定のiOSアップデートでいずれかのアプローチが機能しなくなった場合のベルトアンドブレースアプローチの場合、次のようなものを使用できます。

$("span.clicked").live("click", function(e){alert("span clicked!")})
                 .attr('onclick','')
                 .css('cursor','pointer');

（実際のonclick属性がなくても、消去してもかまいません）

2
CupawnTae

次のように、空のonclick属性を追加できます。

<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });
2
Charlie Schliesser

私はすべてを試しましたが、どのトリックもうまくいきませんでした。 imgの下に動画要素があるため、クリックイベントを取得できなかったことがわかりました。ビデオ要素は明らかにクリックイベントを食べます。

1
mhenry1384

IOSを対象とする場合、次の点を考慮する必要があります。jQueryで$(document).on('click', '.target-element', function (event) {...});のようなイベントの委任を行うと機能しません。 onclick=""をターゲットHTML要素に追加するか、cursor: pointerをそのスタイルに追加する必要があります。

http://gravitydept.com/blog/js-click-event-bubbling-on-ios から取得および適応

IPhoneのSafariは、リンクまたは入力でクリックが発生しない限り、クリックイベントのイベント委任をサポートしていないことがわかります。幸いなことに、回避策があります。

<a>タグが機能する一方で<span>タグが機能しないのは、このためです。

1
mcdado

Document.clickのこの誤解を解決するための私のアプローチ。

  1. タグ本文の次のタグの後にhtmlに追加

    <body> <div id="overlaySection" onclick="void(0)"></div> ... </body>

  2. そのタグのスタイル

    _`#overlaySection {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  content: "";
}
#overlaySection.active {
 opacity: 1;
 visibility: visible;
}`
_

  3. 一部のJQueryスタッフ

    // hide overlay on document click $('#overlaySection').click(function(){ $(this).removeClass('active'); });

このオーバーレイをアクティブにする主なもの

_$('.dropdown > span').click(function() {
    ...
    $('#overlaySection').addClass('active');
    ...
});
_

このアプローチが誰かに役立つことを願っています。ハッピーコーディング！

0
nosensus