23

アンカータグにバインドされた2つのイベントハンドラーがあります。1つはフォーカスとブラー用です。

ハンドラーはデスクトップで起動しますが、iphoneとipadではフォーカスのみが正しく起動されます。アンカータグの外側をクリックしてもぼかしは発生しません（ページ内の他のフォーム要素をクリックした場合にのみぼかしが発生します）：

    $("a").focus(function(){
        console.log("focus fired");
    });

    $("a").blur(function(){
        console.log("blur fired");
    });

HTML：

<html>
<form>
    <a href="#">test link</a>
    <div>
    <input type="text" title="" size="38" value="" id="lname1" name="" class="text">
    </div>
    <div style="padding:100px">
        <p>test content</p>
    </div>
</form>
</html>
4

5 に答える 5

9

アンカーにイベントがアタッチされている場合、iOSでアンカーを最初にタップすると、アンカーがホバー状態になり、フォーカスされます。タップするとホバー状態が削除されますが、リンクはフォーカスされたままになります。これは仕様によるものです。iOSでアプリケーションを適切に制御するには、タッチベースのイベントを実装し、デスクトップイベントではなくそれらに反応する必要があります。

iOSのWebKitでJavascriptイベントを使用するための完全なガイドがあります。

于 2012-11-21T12:13:41.640 に答える
3

これはハックですが、すべてのDOM要素にクリックハンドラーを登録することで.blurを起動させることができます。これにより、以前にフォーカスされた要素からフォーカスが削除されます。

$('*').click();
$('html').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');

2行目は、要素がクリックされたときにハイライトを削除します。

私はこれが最適ではないことを知っていますが、それはあなたを動かすかもしれません。

于 2016-07-29T19:31:48.000 に答える
3

タッチデバイスを使用している場合は、touchleaveイベントまたはtouchendイベントを使用して、ユーザーが領域の外側をクリックしたときに処理できます。

$("a").on('touchleave touchcancel', function () {
      // do something
});

これを機能させるには、次のようにクリックイベントをリッスンするようにフォーカス関数を更新する必要があります。

$("a").on("click", function (e) {
      if(e.handled !== true) {
            e.handled = true
      } else {
            return false
      }
      // do something
 })
于 2017-01-19T11:39:05.693 に答える
2

@NicholasShanksの回答にあるすべてのドキュメントを確認しましたが、すべてのイベントをテストするのに少しイライラしました。

AndroidとiOS：

  • AndroidSamsungS9でテスト済み
  • iOSiPad5ºgenでテスト済み

最後に私は解決策を持っています：iPadはblurとしてmouseoutを聞いているようで、androidはblurイベントを完全に聞いているようです、私は正しいイベントを添付するためにこのケースにターナリを追加するだけです（以前は代わりにモバイルまたはタブレットデバイスを目指していましたコンピュータの。

// element >> element you want to trigger
// os >> function that return operative system 'ios' or 'android' in my case

element.addEventListener(os === 'ios' ? 'mouseout' : 'blur', () => {
  // Do something
})
于 2020-03-27T13:07:34.983 に答える
0

クリックできない要素のblurアンカータグの外側をクリックすると、iOSはクリックを無視するため、イベントは発生しません（clickイベントは発生しません）。

これに関するスレッドがいくつかあります（たとえば、iOS上のChromeで.clickイベントが発生しない）。クリックが実行される要素またはその他の要素に追加cursor: pointerすることで修正できます。<body>

于 2020-12-03T15:15:18.047 に答える