3

jquery.mobileへのイベント「tap」に問題があります。アイテムを「タップ」すると、アイテムが非表示になり、アイテムの下にあるINPUTフィールドでイベント「フォーカス」がトリガーされます。フォーカスイベントが発生しないようにするにはどうすればよいですか？これが小さなサンプルコードです。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <style>
    .drop {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 100;
      padding: 0 0 1px;
    }
    .drop .holder {
      overflow: hidden;
      padding: 10px 10px 3px;
      margin: 0 24px -2px;
      background: #1c365b;
    }
    a {font-size: 24px;}
  </style>
</head>
<body>
  <form action="#" id="form">
    <input type="text" name="input 1">
    <input type="text" name="input 2">
    <input type="text" name="input 3">
  </form>
  <div class="drop">
    <div class="holder">
      <a>Link 1</a><br>
      <a>Link 2</a><br>
      <a>Link 3</a><br>
    </div>
  </div>
  <div id="console"></div>
  <script>
    $(function () {
      var console = $('#console');
      $('.drop').find('a').unbind('tap').bind('tap', function (e) {
        console.append(' tap on drop menu');
        $('.drop').hide();
        return false;
      });
      $('#form').find('input').unbind('focus').bind('focus', function (e) {
        console.append(' focus on ' + $(e.target).attr('name'));
      });
    });
  </script>
</body>

隠されたドロップの後、あなたは得る：

<div id="console">tap on drop menu focus on input 2</div>

stopImmediatePropagation（）メソッドは役に立ちません。

4

3 に答える 3

0

考えられる解決策は、クリックイベント（jqueryを提供）のtapイベント（jquery.mobileを提供）を置き換える必要があることです。

于 2013-03-14T09:50:19.877 に答える
0

私はまったく同じ問題を抱えていますが、それに対する適切な解決策を見つけることができませんでした。

Mobile Safari の問題だと思いますが、私と同じ問題を抱えている人はあなたが最初に見つかりました。

一時的な解決策は次のとおりです。クリックしようとしているボタンの下に隠されていると思われるすべてのフィールドを無効にします。

Sencha では次のようになります。

disableFields: function() {
    this.enableFieldsFunc(); //lets make sure all fields were switched back to default values
    this.disableAllFields();  //and then disable them
},
disableAllFields: function() {
    fields = Ext.ComponentQuery.query('field');
    for(var i = 0; i<fields.length; i++) {
        var field = fields[i];
        if(field.getComponent() && field.getComponent().input && field.getComponent().input.dom && field.getComponent().input.dom) {
            field.wasDisabledBefore = field.getComponent().input.dom.disabled;
            field.getComponent().input.dom.disabled = true;
        }
    }
},
enableFields: function() {
    Ext.create('Ext.util.DelayedTask', this.enableFieldsFunc, this).delay(100);
},
enableFieldsFunc: function() {
    fields = Ext.ComponentQuery.query('field');
    for(var i = 0; i<fields.length; i++) {
        var field = fields[i];
        var disabled = field.wasDisabledBefore;
        if(typeof disabled != 'undefined') {
            field.getComponent().input.dom.disabled = disabled;
        }
    }
}

そして、押されたイベントと解放されたイベントで、 disableFieldsとenableFieldsを呼び出しています

于 2013-09-09T11:34:47.947 に答える
0

JSFiddle で正確なコードを使用すると、問題が発生しません。私はこれをデスクトップ ブラウザと S3 の chrome ブラウザで試しました。

オーバーレイされた div が消えてタップ イベントが発生しますが、フォーカス イベントは、オーバーレイがなくなった後に入力ボックスの 1 つを選択するまで発生しません。

http://jsfiddle.net/U9bYR/

私が変更した唯一のコードは、イベント コードで不要なメソッドを削除したことです。

$(function () {
  var console = $('#console');
  $('.drop').bind('tap', function (e) {
    console.append(' tap on drop menu');
    $('.drop').hide();
    return false;
  });
$('#form').find("input").bind('focus', function (e) {
    console.append(' focus on ' + $(e.target).attr('name'));
  });
});
于 2013-03-14T05:35:05.930 に答える