javascript - Trigger default event on styled select on android -
i have custom wrapper on select box. when click want display native select android. tried triggering "focus", "click" , "mouseenter" on hidden select none of options worked.
ok, created fiddle after tinkering , worked (turns out webkit only). if comes better solution, appreciated.
html
<button id="clickme" value="click me!">click me!</button> <select id="select"> <option>default</option> <option value="1">1</option> <option value="2">2</option> </select>
jquery
var clickme = jquery("#clickme"), select = jquery("#select"); clickme.on("mousedown", function (e) { proxymouseevent(e, select[0]); }); clickme.on("click", function (e) { proxymouseevent(e, select[0]); }); function proxymouseevent(event, element) { var evt = document.createevent("mouseevents"); evt.initmouseevent(event.type, event.bubbles, event.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); element.dispatchevent(evt); }
basically, i'm capturing event in button, copying , sending select. when select detects mousedown event upon itself, triggers it's default behavior (which in desktop os show drop down list, whilst in mobile shows overlay list)
Comments
Post a Comment