web-dev-qa-db-ja.com

iOS Safari Mobile（iPhone / iPad）でblurイベントが発生しないのはなぜですか？

アンカータグにバインドされた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>
javascriptiphonehtmliosipad
19
Mohamed Hussain

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

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

9
Nicholas Shanks

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

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

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

これは最適とは言えませんが、うまくいくかもしれません。

4
Dan Torrey

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

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

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

$("a").on("click", function (e) {
      if(e.handled !== true) {
            e.handled = true
      } else {
            return false
      }
      // do something
 })
2
sains23

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

AndroidおよびiOS：

  • テスト済みAndroid Samsung S9
  • テスト済みiOS iPad5ºgen

最後に私は解決策を手に入れました：iPadはマウスアウトをぼかしとして聞いているようですが、Androidぼかしイベントを完全に聞いています。コンピュータの代わりにモバイルまたはタブレットデバイスを目指しています。

// 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
})
0
Héctor León

最も外側のdiv

<div onclick='click()'>

その後、JavaScriptで

function click(){}
0
Sam