最近有需要用到mui的选择器插件,初步完成后被告知多次点击选择框后无法返回上一页面,如图:
排查原因结果是picker选择器重复调用:
// 生成时间选择器 function renderDateSelect(){ var myDate = new Date(); //获取当前年 var year=myDate.getFullYear(); //获取当前月 var month=myDate.getMonth()+1; //获取当前日 var date=myDate.getDate(); var dtPicker = new mui.DtPicker({ type:"date", beginDate:new Date(year-6,month-1,date), endDate:myDate }); $("#dateSelect").on("touchstart",function(){ dtPicker.show(function(selectItems){ $("#dateSelect").val(selectItems.text); }) }); }
因每点击一次按钮,dtPicker.show()执行一次,所以造成选择器的重复加载,解决方法如下:
$("#dateSelect").on("touchstart",function(){ if($(".mui-dtpicker").hasClass("mui-active")){ return false; }else{ dtPicker.show(function(selectItems){ $("#dateSelect").val(selectItems.text); }) } });
因mui.picker选择器的展示与隐藏是通过添加mui-active类名来实现的,如图:
因此当选择器存在mui-active类名时,即$(".mui-dtpicker").hasClass(“mui-active”),阻止其弹出时间,避免重复调用。