我正在开发一个使用visjs.org时间轴的webapp /网站，用于在传单地图上显示历史地图。我使用了jQuery Sparkle插件来处理单击和双击，因为单击会将选定的历史地图作为顶层，而双击则会将其设置为基础层。
这一切都像所有桌面浏览器上的魅力，但移动浏览器让我头疼。 Chrome移动版和Opera移动版工作正常（点击和双击按预期工作），但Firefox移动版，Android原生浏览器和IOS浏览器不会注册任何点击或点击事件。
它可能与闪光插件有关，但我无法弄清楚如何调整它。
编辑：下面是我的主页以及Sparkle插件的代码
var amountclicked = 0;
var baseselected = 0;
$(".vis-item").bind('click tap', function() {
amountclicked++;
});
$(".vis-item").bind('singleclick', function() {
var isBase = this.classList.contains("vis-item-base");
if (isBase) {
alert("first disable this layer as baselayer");
} else {
var datarray = [];
$.each(timeline.itemsData._data, function(key, value) {
datarray.push(value);
});
var selectid;
var selecteditem = this.firstChild;
for (j = 0; j < datarray.length; j++) {
var currdataobj = datarray[j];
var cc1 = currdataobj.content;
var cc2 = selecteditem.innerHTML
var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').toLowerCase();
var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').toLowerCase();
if (currdatacontent == selecteditemcontent) {
selectid = currdataobj.id;
// if previous selected was also basemap
var prevhistcont;
var prevselected;
timeline.setSelection(selectid)
if (previoushistorical != undefined) {
previoushistorical.classList.add("vis-item-base");
}
var selecteditemID = timeline.getSelection();
var selectedYear = data[selecteditemID - 1].start.getFullYear();
var ind, leng;
leng = layers.length;
for (ind = 0; ind < leng; ++ind) {
var tempitem = layers[ind];
if (tempitem.properties.year != selectedYear.toString()) {
if (openmap.hasLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label])) {
if (previoushistorical != undefined) {
var innertextbase = $(".vis-item-base")[0].innerText;
var curlab = layers[ind].properties.label + "-" + layers[ind].properties.year;
if (innertextbase.search(curlab) != 0) {
var isBase = this.classList.contains("vis-item-base");
var overlaylayer = $(".leaflet-layer:eq( 1 )").find('.leaflet-tile-container:eq( 1 )').find('.leaflet-tile-loaded');
var selectindex = ind;
overlaylayer.animate({
opacity: 0
}, 20, function() {
function deletelayer() {
openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
};
window.setTimeout(deletelayer, 1000); // 5 seconds
});
updateMarkers(selectedYear);
}
} else {
var isBase = this.classList.contains("vis-item-base");
var overlaylayer = $(".leaflet-layer:eq( 1 )").find('.leaflet-tile-container:eq( 1 )').find('.leaflet-tile-loaded');
var selectindex = ind;
overlaylayer.animate({
opacity: 0
}, 20, function() {
function deletelayer() {
openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
};
window.setTimeout(deletelayer, 1000); // 5 seconds
});
updateMarkers(selectedYear);
}
}
} else {
openmap.addLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label]);
overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringToFront();
updateOpacity($("#slide")[0].value);
var layertitle = "<h4>" + layers[ind].properties.label + "-" + layers[ind].properties.year + "</h4>";
var layertext = "";
var draaiboeklink = "";
if (layers[ind].properties.text != undefined) {
layertext = layers[ind].properties.text;
}
if (layers[ind].properties.draaiboek != undefined) {
if (layers[ind].properties.draaiboek == "ja") {
var temp = buildUrl('draaiboek.html', 'title', layers[ind].properties.label.toLowerCase());
var t2 = temp.replace(" & ", "en");
draaiboeklink = "</br><a target='_blank' href='" + t2 + "'>Bekijk de originele kaart</a>";
}
}
$("#mapinfo")[0].innerHTML = layertitle + layertext + draaiboeklink + " ";
}
}
}
};
amountclicked = 0;
}
});
var previoushistorical;
$(".vis-item").bind('lastclick', function() {
if (amountclicked > 1) {
//alert("doubleclick performed");
var isBase = this.classList.contains("vis-item-base");
if (isBase) {
this.classList.remove("vis-item-base");
alert("set standard back");
var datarray = [];
$.each(timeline.itemsData._data, function(key, value) {
datarray.push(value);
});
var selectid;
var selecteditem = this.firstChild;
for (j = 0; j < datarray.length; j++) {
var currdataobj = datarray[j];
var cc1 = currdataobj.content;
var cc2 = selecteditem.innerHTML;
var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').toLowerCase();
var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').toLowerCase();
if (currdatacontent == selecteditemcontent) {
selectid = currdataobj.id;
var selectedYear = data[selectid - 1].start.getFullYear();
var ind, leng;
leng = layers.length;
for (ind = 0; ind < leng; ++ind) {
var tempitem = layers[ind];
if (tempitem.properties.year == selectedYear.toString()) {
var selectindex = ind;
openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
}
}
}
};
openmap.addLayer(basec);
basec.bringToBack();
baseselected--;
previoushistorical = undefined;
} else {
if (baseselected < 1) {
previoushistorical = this;
this.classList.add("vis-item-base");
if (this.classList.contains("vis-selected")) {
this.classList.remove("vis-selected");
}
alert("put as base");
openmap.removeLayer(basec);
var datarray = [];
$.each(timeline.itemsData._data, function(key, value) {
datarray.push(value);
});
var selectid;
var selecteditem = this.firstChild;
for (j = 0; j < datarray.length; j++) {
var currdataobj = datarray[j];
var cc1 = currdataobj.content;
var cc2 = selecteditem.innerHTML;
var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').toLowerCase();
var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').toLowerCase();
if (currdatacontent == selecteditemcontent) {
selectid = currdataobj.id;
var selectedYear = data[selectid - 1].start.getFullYear();
var ind, leng;
leng = layers.length;
for (ind = 0; ind < leng; ++ind) {
var tempitem = layers[ind];
if (tempitem.properties.year == selectedYear.toString()) {
openmap.addLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label]);
overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringToBack();
overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].setZIndex(-2);
}
}
}
};
baseselected++;
} else if (baseselected == 1) {
alert("another historical baselayer");
var datarray = [];
$.each(timeline.itemsData._data, function(key, value) {
datarray.push(value);
});
var tempprev = previoushistorical;
tempprev.classList.remove("vis-item-base");
//timeline.itemSet.setSelection(888888);
var prevselectid;
var prevselecteditem = tempprev.firstChild;
for (j = 0; j < datarray.length; j++) {
var currdataobj = datarray[j];
var cc1 = currdataobj.content;
var cc2 = prevselecteditem.innerHTML;
var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').toLowerCase();
var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').toLowerCase();
if (currdatacontent == selecteditemcontent) {
prevselectid = currdataobj.id;
var selectedYear = data[prevselectid - 1].start.getFullYear();
var ind, leng;
leng = layers.length;
for (ind = 0; ind < leng; ++ind) {
var tempitem = layers[ind];
if (tempitem.properties.year == selectedYear.toString()) {
var selectindex = ind;
openmap.removeLayer(overlayMaps[layers[selectindex].properties.year + " - " + layers[selectindex].properties.label]);
}
}
}
};
previoushistorical = this;
this.classList.add("vis-item-base");
if (this.classList.contains("vis-selected")) {
this.classList.remove("vis-selected");
}
var selectid;
var selecteditem = this.firstChild;
for (j = 0; j < datarray.length; j++) {
var currdataobj = datarray[j];
var cc1 = currdataobj.content;
var cc2 = selecteditem.innerHTML;
var currdatacontent = cc1.replace(/'/g, '"').replace('&', '&').toLowerCase();
var selecteditemcontent = cc2.replace(/'/g, '"').replace('&', '&').toLowerCase();
if (currdatacontent == selecteditemcontent) {
selectid = currdataobj.id;
var selectedYear = data[selectid - 1].start.getFullYear();
var ind, leng;
leng = layers.length;
for (ind = 0; ind < leng; ++ind) {
var tempitem = layers[ind];
if (tempitem.properties.year == selectedYear.toString()) {
openmap.addLayer(overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label]);
overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].bringToBack();
overlayMaps[layers[ind].properties.year + " - " + layers[ind].properties.label].setZIndex(-2);
}
}
}
};
}
}
amountclicked = 0;
}
});
openmap.addLayer(overlayMaps[layers[0].properties.year + " - " + layers[0].properties.label]);
var layertitle = "<h4>" + layers[0].properties.label + "-" + layers[0].properties.year + "</h4>";
var layertext = layers[0].properties.text;
$("#mapinfo").html(layertitle + layertext);