jquery.mobile「點擊」發射「焦點」事件

將事件「點擊」到jquery.mobile中存在問題。當對項目進行「輕擊」時，該項目被隱藏，它觸發位於該項目下方的INPUT字段上的事件「焦點」。我該如何讓焦點事件不會被解僱？這是一個小例子代碼。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>

隱藏下拉後你會得到：

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

stopImmediatePropagation（）方法並不能幫助。

來源

2013-03-13 Anton

在JSFiddle中使用您的確切代碼我沒有遇到您遇到的問題。我已經在桌面瀏覽器和我的S3 Chrome瀏覽器中試過了。

疊加的div消失並觸發輕擊事件，但焦點事件不會觸發，直到您在疊加消失後選擇其中一個輸入框爲止。

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-14 05:35:05 mattjones701

在Chrome瀏覽器中的一切似乎不錯。我可以在「Mobile Safari」和「Opera Mobi」上重現它。我在使用「Safari」瀏覽器的項目中使用phonegap。 – Anton 2013-03-14 08:37:40

可能的解決方案是，我需要更換上的click事件（jQuery的提供）水龍頭事件（提供jquery.mobile）。

來源

2013-03-14 09:50:19 Anton

我有完全相同的問題，我無法找到很好的解決方案。

我想這是移動Safari的一個問題，但你是我發現的第一個跟我有同樣問題的人。

臨時解決方案是：禁用您想要點擊的按鈕下方隱藏的所有字段。

在煎茶它看起來像這樣：

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-09 11:34:47

jquery.mobile「點擊」發射「焦點」事件

回答

相關問題