javascript - jquery.mobile "tap" fired "focus" event -
there's problem event "tap" jquery.mobile. when "tap" on item, item hidden, triggers event "focus" on input field located under item. how can make focus event not fired? here small sample code.
<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; } {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> after hidden drop get:
<div id="console">tap on drop menu focus on input 2</div> stopimmediatepropagation() method not help.
using exact code in jsfiddle don't problem getting. have tried in desktop browser , on s3 in chrome browser.
the overlaid div disappears , fires tap event focus event not fire until select 1 of input boxes after overlay gone.
the code changed remove unnecessary methods in event code.
$(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')); }); }); 
Comments
Post a Comment