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

What is the best way to include a string in formData when making an ajax request

Unusual animation glitches encountered while coding with Swift 4 and UIView

Creating a CSS3 web design inspired by the Facebook-image style - here's how!

Using jQuery to inject quotation marks

Obtain the contenteditable span's value

Shifting a div from side to side

Tips for dynamically populating select options with objects

A DataTable cannot be reinitialized within an AJAX response

Navigate within a single component on the Stack by scrolling

Changing the background color with a switch function in ReactJS

What causes the alignment of text to be overridden by the presence of a floating element?

Insert information into the #myModal window of Twitter Bootstrap

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

Navigating Swift's optionals behavior within an if-statement

Leveraging NSUserDefaults

Mastering Ajax techniques for uploading multiple files

Using jquery to dynamically change audio source on click

The Jquery.ajax function is passing null values to the controller, but it functions properly when using pre-defined

Struggling to make a basic ajax request function correctly

Having issues with C# ASP.Net autocomplete not functioning properly when using Javascript/Json post