What's preventing me from tapping on hyperlinks on my mobile device?

I'm currently working on a website (saulesinterjerai.lt) and everything seems to be functioning properly, except for the fact that on mobile devices, the links aren't clickable and instead navigates to other layers. How can I disable this behavior in the code itself rather than adjusting it through the browser settings?

Below is the code that I've written so far, with some sections being adapted from online sources (all located within the "dep" folder if you're familiar with using developer tools). I suspect that the issue may be related to either the 'pjax' or the proprietary 'zoomable' module, but I haven't been able to pinpoint the exact cause:

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

var attach_menu_control = function() {
  // Function logic here
}

// Various event listeners are set up for different actions

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

function is_touch_device() {
    return 'ontouchstart' in window || navigator.maxTouchPoints;
}

CSS styling:


// CSS styles for the menu function and responsiveness based on screen size go here

Answer №1

It appears that the issue is related to a specific function being called:

 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()
    }
}

The e.preventDefault() in the code prevents the default browser action, which would normally be to switch pages and follow the URL in the link.

It is important to consider which element this handler is attached to, as it may not feel natural for certain elements like links.

The warnings from the Chrome console specifically mention:

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

UPDATE

Upon reviewing the handlers on your elements, it seems there may be conflicting roles causing unexpected behavior. If possible, simplifying or rewriting the menu system integration could resolve the issue.

If restructuring isn't an option, implementing a workaround might be beneficial. For instance, adding a transparent overlay when the menu is open can signify to users that the rest of the screen is inactive. Setting pointer-events: none on the main content during this time will ensure only the menu receives interaction events. I hope this suggestion proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to ensure that a div automatically moves below the main div when it reaches its full length?

I am facing an issue with a foreach statement in jQuery where I am generating Bootstrap cards for each product in a list. The problem arises when attempting to create multiple cards in a row, as the width of the cards becomes too small for the content. I ...

Invoke a Python function from JavaScript

As I ask this question, I acknowledge that it may have been asked many times before. If I missed the answers due to my ignorance, I apologize. I have a hosting plan that restricts me from installing Django, which provided a convenient way to set up a REST ...

Ways to deactivate webfonts specifically for Safari

Recently, I have been experiencing font crashing issues with the webfont on Safari. Is there a way to disable this font specifically for this browser? ...

Using TypeScript to type styled-system props

Currently, I am utilizing styled-system and one of the main features of this library is its shorthand props that allow for simple and quick theming. Although I have streamlined my component, a significant aspect lies here: import React from 'react&a ...

Troubleshooting Timeout Problems with Selebiun Crawler in C#

I am encountering an error while running the following code. public void GetCategoriesSelenium() { string javascript = System.IO.File.ReadAllText(@"GetCategory.js"); CrawlerWebSeleniumJS.ExecuteScript("var finished;"); ...

Updating the state of a nested array using React Hooks

After spending some time working with React Hooks, my main struggle has been dealing with arrays. Currently, I am developing a registration form for teams. Each team consists of a list of players (an array of strings). The goal is to allow users to add t ...

Finding elements based on a specific parent structure in JavaScript: A step-by-step guide

I'm currently working on a script that needs to grab content only within a specific parent structure defined as div.main-element input+label+ul. Is there a way to achieve this using JavaScript or jQuery? If anyone could point me in the right directi ...

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Currently, I am working with material-ui autocomplete and passing an array of states to its options property. However, I have encountered an issue with the getOptionLabel method: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined ...

The appearance of the logo varies across various web pages on the site

Isn't it strange that my logo appears pixelated only on the home page, even though I used the same HTML and CSS code for all pages? The Html: <a href="Home.html"><img id="logo" src="../CONTENT/Images/Logo/1Sr2l8а.png" alt="logo"/></ ...

Hover over with your mouse to open and close the dropdown menu in React JS

Just starting out with React JS and encountering a small issue. I'm trying to make the menu disappear when the mouse leaves that area, so I used onMouseOut and onMouseLeave to close it. However, I noticed that having these options in place prevents th ...

Internet Explorer freezing when running selenium executeScript

Hey everyone, I've spent the past couple of days scouring the internet trying to find a solution to my modal dialog problem. There's a wealth of helpful information out there and everything works perfectly fine except for Internet Explorer. Speci ...

Tips for incorporating a multiple tag search feature within my image collection using JavaScript?

I am facing a challenge with my image gallery search feature. Currently, users can search for images by typing in the title or tag of an image. However, I need to enhance this functionality to allow for multiple tags to be searched at once. For example, if ...

Determining if a path is within the same directory: a step-by-step guide

I need to check if the input path is located in the same folder or not Question: Is the input path in the same folder? For example, if my current path is f://learning/java and I am currently in a folder named java, then any path that directly belongs to ...

Stop the form from submitting when the Enter key is pressed

I am experiencing an issue with my form that contains around 10 input text boxes. When I press the enter key from an input text box, it skips the text boxes in between and goes directly to the submit button. This problem occurs only when using the keyboard ...

Align boxes in the center within a DIV container

Here is the box design that I have created: The green color boxes are generated dynamically inside a "col-md-10" div. If there are less than 3 boxes in the second row, I would like to center align them. For example, in this case, I want the "Bi-monthly" b ...

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...

Is it possible to assign a deconstructed array to a variable and then further deconstruct it?

Is there a way to deconstruct an array, assign it to a variable, and then pass the value to another deconstructed variable all in one line of code? Take a look at what I want to achieve below: const { prop } = [a] = chips.filter(x => x.id == 1); Typic ...

MUI-Datatable: Is there a way to show the total sum of all the values in a column at once

I have a column displaying the Total Amount, and I am looking for a way to show this totalAmount. After conducting some research, it seems like onTableChange is the key. Currently, it effectively displays all of the data using console.log("handleTab ...

You must pass a string, Buffer, ArrayBuffer, or Array as the first argument when using Uint8Array.slice(). A number was received instead

Here is my implementation of the ByteArray class, which extends the Uint8Array class. export class ByteArray extends Uint8Array { ... private _encoded: string; ... constructor(_encoded: string) { super(Buffer.from(_encoded, " ...

Adjust the select box size to be in line with the text box dimensions

I'm struggling to understand why there are two boxes visible in my navigation bar. For example, when looking at the Home link, I notice that there are actually two boxes; one containing the text "Home" and another one that extends outwards to the rig ...