在我所制作的网站的移动版本上,我使用javascript文件来处理用户的点击以打开侧面显示。
我想要做的是,如果用户按下侧面显示器,它应该展开,如果触摸区域不是侧面显示器缩回到原始状态。
目前正在使用三星浏览器,我也尝试过使用Chrome和safari浏览器的iphone,当它按在侧面显示器上时它会扩展,但只有当我按下位于右下角的按钮时它才会关闭。除侧面导航和背景之外的区域不会启动div以返回原始状态。
以下是我处理触摸事件的javascript代码:
document.getElementById('side_box').addEventListener('touchend', function(event){
var touchobj = event.changedTouches[0] // reference first touch point for this event
const vals = document.getElementById('val-display');
const lst_elem = document.getElementsByClassName('list-element');
const arrow = document.getElementById('arrow');
if(screen && screen.width < 480) {
if (event.target === this || event.target === arrow) {
this.style.opacity = "0.7";
this.style.width = "200px";
vals.style.opacity = "0";
arrow.style.display = "none";
for (let i = 0; i < lst_elem.length; i++) {
lst_elem[i].style.visibility = "visible";
}
} else {
this.style.opacity = "0.3";
this.style.width = "50px";
vals.style.opacity = "1";
arrow.style.display = "block";
for (let i = 0; i < lst_elem.length; i++) {
lst_elem[i].style.visibility = "hidden";
}
}
}
event.preventDefault();
}, false);
if语句目前工作正常,但是除了侧面显示之外的其他任何地方都没有启动,否则会出现问题。
您还可以在手机上登录andy.serra.us来查看问题。
感谢您的帮助。