Having trouble getting the jQuery click event to work on iPhone browsers? Despite already trying the cursor:pointer; method

Question

Having trouble getting the jQuery click event to work on iPhone browsers? Despite already trying the cursor:pointer; method

I am facing an issue with setting a click event on anchor tags in my WordPress site. Surprisingly, the event works perfectly fine on all of my devices including PC, Android phone, and tablet except for my iPhone.

Despite trying to set the 'Cursor' property to 'Pointer' for the anchor tags, I have not been successful.

I have exhausted all my options by searching on SO (Stack Overflow) for solutions, but unfortunately, nothing seems to resolve the issue :/

If anyone has any suggestions or solutions, I would greatly appreciate it.

jquery ios css click

Answer 1

Answer №1

It seems like you can replace href with onclick in order to use a JavaScript function like this:

function ANYTHING() {
   $("a[href^=#]").on('click touchstart', function(e) {
   e.preventDefault(); var dest = $(this).attr('href');  
   console.log(dest);
   $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow');
  });
}

.scroller {
            cursor: pointer;
        }

<a class="scroller" onclick="void(0)" onclick='ANYTHING('>
   <div id="mobile-hero-book" class="book-now-btn">Book a Car</div>
</a>

If this solution works for you, feel free to keep the href attribute in your HTML as needed!

Answer 2

It seems like you can replace href with onclick in order to use a JavaScript function like this:

function ANYTHING() {
   $("a[href^=#]").on('click touchstart', function(e) {
   e.preventDefault(); var dest = $(this).attr('href');  
   console.log(dest);
   $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow');
  });
}

.scroller {
            cursor: pointer;
        }

<a class="scroller" onclick="void(0)" onclick='ANYTHING('>
   <div id="mobile-hero-book" class="book-now-btn">Book a Car</div>
</a>

If this solution works for you, feel free to keep the href attribute in your HTML as needed!

Answer 3

Answer №2

Here is a handy jQuery plugin I created specifically for the issue you're facing:

$(document).ready(function() {
  $("#special-button").press(function() {
    console.log("The special button was pressed!");
  });
});

$.fn.press = function(callback) {
  var press = false;
  $(this).on("click", function(e) {
    if (!press) {
      console.log("Click detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    } else {
      press = true;
    }
    press = false;
  });
  $(this).on("touchstart", function(e) {
    $(this).blur();
    if (typeof e.touches != typeof undefined) {
      e.preventDefault();
      press = true;
      console.log("Touch detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="special-button">Try Me</button>

EDIT 1:

Removed

EDIT 2:

I misinterpreted the question. The code above still works well with iOS devices, but here's how to handle anchor tags. Remove the #id href:

$(document).ready(function() {
  $(".anchor-tag").press(function() {
    var targetElem = $("#" + $(this).data('target-elem'));
    $('html,body').animate({
      scrollTop: targetElem.offset().top
    }, 'slow');
  });
});

$.fn.press = function(callback) {
  var press = false;
  $(this).on("click", function(e) {
    if (!press) {
      console.log("Click detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    } else {
      press = true;
    }
    press = false;
  });
  $(this).on("touchstart", function(e) {
    $(this).blur();
    if (typeof e.touches != typeof undefined) {
      e.preventDefault();
      press = true;
      console.log("Touch detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    }
  });
}

#target-element {
  margin-top: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:void(0);" class="anchor-tag" id="link-1" data-target-elem="target-element">Try Me</a>

<div id="target-element">
  <p>This is the target container</p>
</div>

Answer 4

Here is a handy jQuery plugin I created specifically for the issue you're facing:

$(document).ready(function() {
  $("#special-button").press(function() {
    console.log("The special button was pressed!");
  });
});

$.fn.press = function(callback) {
  var press = false;
  $(this).on("click", function(e) {
    if (!press) {
      console.log("Click detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    } else {
      press = true;
    }
    press = false;
  });
  $(this).on("touchstart", function(e) {
    $(this).blur();
    if (typeof e.touches != typeof undefined) {
      e.preventDefault();
      press = true;
      console.log("Touch detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="special-button">Try Me</button>

EDIT 1:

Removed

EDIT 2:

I misinterpreted the question. The code above still works well with iOS devices, but here's how to handle anchor tags. Remove the #id href:

$(document).ready(function() {
  $(".anchor-tag").press(function() {
    var targetElem = $("#" + $(this).data('target-elem'));
    $('html,body').animate({
      scrollTop: targetElem.offset().top
    }, 'slow');
  });
});

$.fn.press = function(callback) {
  var press = false;
  $(this).on("click", function(e) {
    if (!press) {
      console.log("Click detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    } else {
      press = true;
    }
    press = false;
  });
  $(this).on("touchstart", function(e) {
    $(this).blur();
    if (typeof e.touches != typeof undefined) {
      e.preventDefault();
      press = true;
      console.log("Touch detected!");
      let callbackReal = callback.bind(this);
      callbackReal(this, e);
    }
  });
}

#target-element {
  margin-top: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:void(0);" class="anchor-tag" id="link-1" data-target-elem="target-element">Try Me</a>

<div id="target-element">
  <p>This is the target container</p>
</div>

Having trouble getting the jQuery click event to work on iPhone browsers? Despite already trying the cursor:pointer; method

Answer №1

Answer №2

Similar questions

Tips for wrapping the content of a <span> element within a <td> element

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

Tips for presenting JSON data retrieved using jQueryWould you like to know how

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

CSS :hover problem, text appearing unexpectedly

Submitting forms using Ajax within a modal pop-up box

The magic of $.ajax lies in its ability to load an unexpected URL, diverging from my original

Setting the variable to global does not apply styling to the element

alignment not behaving as anticipated

Do not fulfill the promise until all the images have finished loading

By employing the actions class for scrolling to the bottom of the page, inadvertently clicking on another element triggers an unintended right-click context menu to appear

Choose an image to be displayed at either full width or full height, depending on which dimension is reached first

Is there a way to convert a button into clickable text that performs the same function as the original button?

What could be the reason behind my Javascript code returning "object object"?

What is causing the mouse to malfunction when interacting with this HTML form?

The background on my modal remains unchanged

The width of the Div is set to 100%, yet there is still some empty space visible on

Utilize a Vue.js filter on the v-model within an input element

Arranging two list items (<li>) side by side in HTML code

Python script for extracting content from web pages that are loaded dynamically