“touchend”活动部分不适用于iphone移动浏览器

时间:2017-12-05 16:05:30

标签: javascript html css mobile-browser

在我所制作的网站的移动版本上,我使用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来查看问题。

感谢您的帮助。

0 个答案:

没有答案