Javascript jquery.mobile"；轻敲；“解雇”；焦点“；事件_Javascript_Jquery_Cordova_Jquery Mobile_Mobile

Javascript jquery.mobile"；轻敲；“解雇”；焦点“；事件

javascript jquery cordova jquery-mobile mobile

Javascript jquery.mobile"；轻敲；“解雇”；焦点“；事件,javascript,jquery,cordova,jquery-mobile,mobile,Javascript,Jquery,Cordova,Jquery Mobile,Mobile,“点击”jquery.mobile的事件有问题。当“点击”该项时，该项被隐藏，它会在该项下的输入字段上触发事件“聚焦”。如何使焦点事件不被触发？下面是一个小示例代码 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquer

“点击”jquery.mobile的事件有问题。当“点击”该项时，该项被隐藏，它会在该项下的输入字段上触发事件“聚焦”。如何使焦点事件不被触发？下面是一个小示例代码

<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>


.放下{
位置：固定；
左：0；
排名：0；
宽度：100%；
z指数：100；
填充：0 0 1px；
}
.放下.保持架{
溢出：隐藏；
填充：10px 10px 3px；
利润率：0.24px-2px；
背景：#1c365b；
}
a{font size:24px；}
链接1

链接2

链接3

$（函数（）{
变量控制台=$（“#控制台”）；
$（'.drop'）。查找（'a'）。解除绑定（'tap'）。绑定（'tap'，函数（e）{
console.append（'点击下拉菜单'）；
$（'.drop'）.hide（）；
返回false；
});
$（'#form'）。查找（'input'）。取消绑定（'focus'）。绑定（'focus'，函数（e）{
append（'focus on'+$（e.target.attr（'name'））；
});
});

隐藏放置后，您将获得：

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

点击下拉菜单聚焦输入2

stopImmediatePropagation（）方法没有帮助。

使用JSFIDLE中的精确代码，我不理解您遇到的问题。我已经在桌面浏览器和我的S3浏览器上试过了

覆盖的div消失并触发tap事件，但焦点事件不会触发，直到覆盖消失后选择其中一个输入框

我唯一更改的代码是删除事件代码中不必要的方法

$(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'));
  });
});

可能的解决方案是，我需要在单击事件（提供jquery）上替换tap事件（提供jquery.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:function（）{
this.enableFieldsFunc（）；//让我们确保所有字段都切换回默认值
这个.disableAllFields（）；//然后禁用它们
},
disableAllFields:function（）{
fields=Ext.ComponentQuery.query（'field'）；
对于（var i=0；iIn chrome浏览器，一切似乎都很好。我可以在“Mobile Safari”和“Opera Mobi”上复制它。我在我的项目中使用phonegap，它使用“Safari”浏览器。