One click button works on larger screens, but on phone devices only double click works

Question

This is in angular. I have a button that works perfectly fine on larger screens ( ex. macbook ) with one simple click, but when it is on an iphone it only works with double click ( it works fine on android ). It is supposed to work on oneclick aswell. The alert is triggering on single clikc but not the photo upload. Can somebody have an ideea why is that so ? Thanks.

  $scope.triggerUploadPhoto = function () {
        var width = $(window).width();
         alert(123);
         if(width< 768){
             $('#sidebar').css('display','');
             $('#sidebar').addClass('modal-hidden');
             $('#side-modal-upload-photo').removeClass('active-modal');
             $('#side-modal-upload-photo').addClass('modal-hidden');
             $('.five-item-on-hover').css('background-color','transparent');
         }
        $('#photo-upload').trigger('click');
        $('.stored-images').trigger('click');
        $scope.toggleUploadPhoto();
        
    }

tharunoptimus · Answer 1 · 2021-01-28T15:43:19.340

It works well with chromium browsers, but it may not work with safari sometimes. The best method would be to use the jQuery and use the touchstart event instead of the onclick event on the button. Or, just to cover all grounds, you can also use the ontouchstart event on the element too.

So, if the HTML code looks like this,

<html>
    <body>
        <button id="redirectButton">Redirect Me!</button>
    </body>
</html>

Then we can add this line in the <button> element

ontouchstart="myFunction()" and define your myFunction() in JS. But one safer way to do that( safer: works in all ) is to use jQuery

Just Insert any jQuery CDN in your head section of your html and add this line in the JS and define the element

$(document).ready(function(){ 
    $('#buttonID').on('click touchstart', function() {
        //Your code here
    });
});

And Example:

/*jQuery - include in JS*/
$(document).ready(function(){ 
  $('#redirectButton').on('click touchstart', function() {
    window.location.href="http://example.com";
  });
});

<!--HTML-->
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    </head>
    <body>
        <button id="redirectButton">Take Me To Example.com</button>
    </body>
</html>

If you use bootstrap and still this doesn't work you might want to refer this thread: Button not working on Mobile Devices but works on PC bootstrap

One click button works on larger screens, but on phone devices only double click works

1 Answers1