为什么我不能点击移动设备上的链接？

Question

我正在开发一个网站 (saulesinterjerai.lt) 现在一切正常，除了在移动设备上链接不可点击，而是通过其他层..

如何从代码中禁用此行为？（不在浏览器上）

我写的代码在这里，但是我从网上复制了一些代码（如果您知道如何使用开发工具，则所有内容都在 "dep" 文件夹中）。我也确实怀疑 pjax 或专有 "zoomable" 模块可能有问题，但我找不到原因..:[=14=]

var pjax = new Pjax({ selectors: ["head title", "body"] })
var Site;

var attach_menu_control = function() {
  var $sidebar = document.querySelector('.sidebar')
  var $sidebar_content = $sidebar.querySelector('.content')
  var $menu_opener = $sidebar.querySelector('.menu-closed')

  var hide_menu = function() {
    $sidebar_content.style.display = 'none'
    $menu_opener.style.display = 'block'
    $sidebar.style.width = '40px'
  }

  var show_menu = function() {
    $sidebar_content.style.display = 'block'
    $menu_opener.style.display = 'none'
    $sidebar.style.width = '270px'
  }

  var click_handler = function(e){
    // e.preventDefault()
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if ($sidebar_content.style.display == 'none') {
      show_menu()
    } else if (width <= 724) {
      hide_menu()
    }
  }

  if ( !is_touch_device() ) $sidebar.addEventListener('click', click_handler)
  $sidebar.addEventListener('touchend', click_handler)
  var event = new Event('click');
  $sidebar.dispatchEvent(event)
}
attach_menu_control()

document.addEventListener('DOMContentLoaded', reloadCarbon)
document.addEventListener('pjax:complete', reloadCarbon)
document.addEventListener('pjax:send', resetCarbon)

// Animations

document.addEventListener('pjax:send', function(){
  var $main = document.querySelector('main')
  $main.style.opacity = 0
})

document.addEventListener('pjax:complete', function(){
  var $main = document.querySelector('main')
  $main.style.visibility = 'hidden'
  $main.style.opacity = 0
  setTimeout(function(){
    document.querySelector('main').style.visibility = 'visible'
    document.querySelector('main').style.opacity = 1
    attach_menu_control()
  }, 10)
})

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function is_touch_device() {
  return 'ontouchstart' in window        // works on most browsers 
      || navigator.maxTouchPoints;       // works on IE10/11 and Surface
}

CSS:

    .menu-closed {
        font-size: 30px;
      position: absolute;
      writing-mode: vertical-lr;
      top: 50%;
      padding-left: 14px;
      cursor: pointer;
    }

    .sidebar {
        transition: width 0.2s;
        overflow-x: hidden;
        z-index: 10000;
        backface-visibility: hidden;
    }

    .sidebar .content {
        width: 270px;
    }


    @media only screen and (max-width: 724px) {
        .sidebar {
            background-color: rgba(245, 245, 245, 0.87);
        }

        .sidebar h1 {
            font-size: 36px;
        }

        .sidebar header h2 {
            font-size: 28px;
        }

        .language {
            font-size: 16px;
        }

        .sidebar nav > ul > li {
            line-height: 36px;
        }

        .sidebar nav > ul.siteLinks a, 
        .sidebar nav > ul > li > a {
            font-size: 36px;
            line-height: 36px;
        }

        main {
            padding-left: 40px;
        }

        /* Force sideback to be in closed mode when new page is opened */
        .sidebar {
            width: 40px;
        }

        .sidebar .content {
            display: none;
        }
    }

    /* Emulate fixed positionin */

    html {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    body {
        height: 100%;
        overflow: auto;
    }

    .fixed {
        position: absolute;
    }

Answer 1

我认为这是由于调用了这个函数：

 var click_handler = function(e){
    e.preventDefault()
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if ($sidebar_content.style.display == 'none') {
      show_menu()
    } else if (width <= 724) {
      hide_menu()
    }
  }

e.preventDefault() 阻止浏览器执行默认操作，这里：切换页面并按照link中的URL。

我想您必须小心附加此处理程序的项目。这种处理程序在 link.

上感觉不太自然

Chrome 控制台的警告强调了这一点：

Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
click_handler @ app.js:34

编辑

我看到很多处理程序附加到您的元素，但我不了解每个处理程序的作用（例如，我不知道 pjax 库），我认为其中一个要为预期行为的丢失负责.如果我是你，也许我会尝试让它变得更简单，并重写菜单系统并将其集成到网页中。

如果您不能（或不想）重构页面，也许不要尝试修复它，而是尝试一种变通方法。

我要做的是在菜单打开时添加一个透明的灰色背景，向用户显示屏幕的其余部分被禁用（或完全透明，当用户 clicks/taps 在其上时，它关闭菜单返回主要内容）。打开菜单后，在主要内容上设置以下 css：

pointer-events: none

这将阻止菜单下的pictures/content接收事件，只有菜单应该接收click/tap事件。希望这对您有所帮助！

为什么我不能点击移动设备上的链接？

Why can't I click on links on mobile device?

javascript

css

click

touch-event