BMapLib库的窗体自定义的关闭按钮在移动端由于阻止了其冒泡事件,在窗体中的点击事件都不生效,现在自己定义一个新的关闭按钮对其进行监听,利用touchend事件关闭窗体;
一、JS代码
//定义窗口内容
var info = "<div class='plat-box qypopup'>" +
" <div class='popupHeader'><div class='popupTitle'>" + model.EVENTNAME +"</div><div" +
" class='closeBtn'>X</div></div>" +
" <div class='popupInfo'>" +
" <table class='qyinfo'>" +
" <tr>" +
" <td>事件编号</td>" +
" <td colspan='3'>" + model.EVENTNUMBER + "</td>" +
" </tr>" +
" <tr>" +
" <td>事件来源</td>" +
" <td colspan='3'>" + getEventSource(model.EVENTSOURCE) + "</td>" +
" </tr>" +
" <tr>" +
" <td>发生时间</td>" +
" <td colspan='3'>" + FormatDate(model.HAPPENDATE,'Min') + "</td>" +
" </tr>" +
" <tr>" +
" <td>涉事企业</td>" +
" <td colspan='3'>" + model.BELONGDEPNAME + "</td>" +
" </tr>" +
" <tr>" +
" <td>事件等级</td>" +
" <td colspan='3'>" + getEventGrade(model.EVENTGRADE) + "</td>" +
" </tr>" +
" </table>" +
" <table class='qyinfo' id='moreInfo' style='display: none;margin:-11px 0 0'>" +
" <tr>" +
" <td>发生地点</td>" +
" <td colspan='3'>" +getNullData(model.HAPPENDRESS) + "</td>" +
" </tr>" +
" <tr>" +
" <td>伤亡情况</td>" +
" <td >" + getNullData(model.HURT) + "</td>" +
" <td>报警人</td>" +
" <td >" + getNullData(model.ALARMSENDMAN) + "</td>" +
" </tr>" +
" <tr>" +
" <td>报警电话</td>" +
" <td >" + getNullData(model.ALARMSENDPHONE) + "</td>" +
" <td>接警人</td>" +
" <td >" + getNullData(model.ALARMRECEIVEMAN) + "</td>" +
" </tr>" +
" <tr>" +
" <td>接警时间</td>" +
" <td colspan='3'>" + FormatDate(model.ALARMRECEIVEDATE,'Min') + "</td>" +
" </tr>" +
" </table>" +
" </div>" +
" <div class='openMore'></div>" +
" <div class='popup-triangle'></div>" +
"</div>";
var infoBox = new BMapLib.InfoBox(map, info, {
boxStyle: {
minWidth: "300",
Height: "381",
marginBottom: "30px"
},
closeIconMargin: "14px 13px 0 0",
closeIconUrl: "../Images/Map/back.png",
enableAutoPan: true,
align: INFOBOX_AT_TOP,
position : tmpPt,
offset : new BMap.Size(0, 30)
});
infos.push(infoBox);
//把关闭按钮放在窗体打开的监听事件里面,否则选择器无法用事件代理的方法获取的关闭按钮;
infoBox.addEventListener("open", function(e) {
$('.closeBtn').on('touchend',function () {
infoBox.close();
});
});
//同理,我在窗体里有一个折叠面板的操作,在移动端必须用使用touch事件才可以触发事件,获取选择器也必须要写在窗体打开后的事件里;
infoBox.addEventListener("open", function(e) {
$('.openMore').on('touchend',function () {
$(this).toggleClass("closeMore");
$("#moreInfo").toggle();
});
});
补充:由于infoBox的窗体结构自带关闭按钮,将closeIconMargin和closeIconUrl去除后窗体中还是保留其图片位置,所以我将自定义的关闭按钮和closeIcon 的位置用CSS重叠了,其实起作用的是自定义的closeBtn按钮。
如图: