Pourquoi ne puis-je pas cliquer sur les liens sur un appareil mobile?

Question

Je développe un site (saulesinterjerai.lt) Tout fonctionne maintenant, sauf sur l'appareil mobile, les liens ne sont pas cliquables, au lieu de cela passe par d'autres couches ..

Comment puis-je désactiver ce comportement à partir du code? (pas sur le navigateur)

Le code que j'ai écrit est ici, cependant certaines parties du code que j'ai copié du web (tout dans le dossier "dep" si vous savez comment utiliser les outils de développement). Je pense aussi qu'il ne pourrait être un problème pjax ou le module « zoomable » propriétaire, mais je ne trouve pas pourquoi ..:

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

Je pense que cela est dû à cette fonction, qui est appelée:

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() empêche le navigateur d'exécuter l'action par défaut, ici: pour changer de page et suivez l'URL dans le lien.

Je suppose que vous devez faire attention à l'élément auquel vous attachez ce gestionnaire. Ce type de gestionnaire ne semble pas très naturel sur un lien.

Cela a été souligné par les avertissements de la console 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 

EDIT

Je vois beaucoup de gestionnaires attachés à vos éléments, et je ne comprends pas le rôle de chacun (i don Je ne connais pas le pjax lib par exemple), je pense qu'on est responsable de la perte du comportement attendu. Si j'étais vous, peut-être que j'essaierais de simplifier et de réécrire le système de menu et son intégration dans la page Web.

Si vous ne pouvez pas (ou ne voulez pas) refactoriser la page, n'essayez peut-être pas de la résoudre mais essayez une solution de contournement. Ce que je ferais est d'ajouter une toile de fond grise transparente quand le menu est ouvert, pour montrer à l'utilisateur que le reste de l'écran est désactivé (ou complètement transparent et quand l'utilisateur clique dessus/tape dessus, il ferme le menu revenir au contenu principal). Lorsque le menu est ouvert, vous définissez sur le contenu principal de la css suivante:

pointer-events: none 

Cela permettra d'éviter les images/contenu dans le menu pour recevoir des événements, et que le menu devrait obtenir cliquez sur/événements robinet. J'espère que cela t'aides!