javascript - 为什么我的范围滑块在移动设备上不起作用?
问题描述
我的网页有问题。我正在尝试为地图上的图层做侧导航。它必须能够移动不同的图层(有点像 Photoshop),并使用滑块设置图层的不透明度。它在台式机上运行良好,但在触摸屏上却不行。如果我注释掉使列表可排序的行,则滑块可以在移动设备上使用,但是我需要它能够同时执行这两种操作。
//makes html list of the current layers
function makeList()
{
layersToArray();
// Make a container element for the list
var listContainer = document.createElement("div");
// Add it to the page
document.getElementById("layerStackSideNav").appendChild(listContainer);
// Make the list
var listElement = document.createElement("ul");
listElement.setAttribute("id","sortable");
// Add it to the page
listContainer.appendChild(listElement);
var numberOfListItems = layerNames.length;
// Set up a loop that goes through the items in listItems one at a time
for (var i = numberOfListItems-1; i > -1; i--)
{
// create an item for each one
var listItem = document.createElement("li");
// Add the item text
listItem.innerHTML = layerNames[i];
// Add listItem to the listElement
listElement.appendChild(listItem);
//Make opacity slider
var sliderContainer = document.createElement("div");
sliderContainer.setAttribute("class","sliderContainer");
listItem.appendChild(sliderContainer);
var opacitySlider = document.createElement("input");
opacitySlider.setAttribute("id", layerNames[i]);
opacitySlider.setAttribute("class", "slider");
opacitySlider.setAttribute("type", "range");
opacitySlider.setAttribute("min", "0");
opacitySlider.setAttribute("max", "1");
opacitySlider.setAttribute("step", "0.1");
opacitySlider.setAttribute("value", "1");
opacitySlider.setAttribute("oninput",
"findLayerByName(\""+layerNames[i]+"\").setOpacity(this.value)");
sliderContainer.appendChild(opacitySlider);
}
}
解决方案
推荐阅读
- jenkins - 如何编写 sed 命令以仅提取“选择”查询并将输出保存到 CSV
- c# - FileNorFoundException - Microsoft.TeamFoundation.WorkItemTracking.Client.DataStoreLoader
- html - 我该如何制作,以便背景图像作为“整体”加载,而不是部分加载,然后以黑白颜色加载?
- c - 缓冲区溢出 - 查找 EIP
- mysql - 如何消除 SQL 中的错误
- json - 创建一个 Json 文件作为 ffmpeg 命令行的输出
- python - Python BeautifulSoup 仅从表格单元格打印
- django - 如何使用 django 表单保留 2 个字段
- gmail - Unable to receive AWS Cognito Verification emails to My Gmail Account
- android - 将按钮放在地图活动的底部