preventDefault does not work in Browsers for Mobile

Question

In computer browsers I can prevent the default anchor action normally, but using in most mobile browsers does not work.

I need that when clicking the link the browser does not direct to the link URL, just show in an Alert which URL is in the attribute href, follows code I’m using:

$(".myGallery a").on("click touchstart", function(event){
  event.preventDefault();
  alert($(this).attr("href"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="myGallery">
  <a href="https://www.yourhtmlsource.com/images/media/banjotooiebig.jpg">
    <img src="https://www.yourhtmlsource.com/images/media/banjotooiesmall.jpg" alt="Image">
  </a>
</div>

I tried in the following browsers to Android:

• Chrome 70.0.3538.110
• Chrome 34.0.1847.114
• Opera Mini 35.0.2254.127755
• CM Browser 5.22.17.0003

Answer 1

You can put a return false; at the end of the event function that the action of the element that triggered the event will not proceed.

Under normal circumstances the preventDefault() should work, as I tested here in Chrome below mentioned in the question:

Code:

$(".myGallery a").on("click touchstart", function(event){
  event.preventDefault();
  alert($(this).attr("href"));
  return false;
});