HTML 按钮在桌面上正常工作 在移动设备上不起作用

Question

I have made a website and while the desktop version is finished i am still fighting with the mobile one. So anyways, every single button that uses js to do its thing doesnt work, while normal buttons with links work just fine. The issue also does not appear on chrome using the 'toggle device toolbar' option, which should technically simulate touch events.

This is how a sample button looks like:

 <a class="button" id="upload-media-button">Upload</a>

And this is the js that uses it:

$(document).ready(function() {

    $('#upload-media-button').on('click touchstart', function(){
        dropperForm = document.getElementById("upload-form");
        dropperForm.className = '';
        isUploadFormVisible = 1;
        $("body").addClass("modal-open");

    });
}

Answer 1

Can't say exactly why this is happening.

But this may be case. We should disable the default behavior of browser.

As it is an anchor tag, browser have its own handling.

Like modify your code like this

$(document).ready(function() {

  $('#upload-media-button').on('click touchstart', function(event){
    event.preventDefault();
    dropperForm = document.getElementById("upload-form");
    dropperForm.className = '';
    isUploadFormVisible = 1;
    $("body").addClass("modal-open");

  });
}

Hope this helps.

Answer 2

try replacing touchstart with tap like this

$(document).ready(function() {

  $('#upload-media-button').on('click tap', function(event){
     event.preventDefault();
     dropperForm = document.getElementById("upload-form");
     dropperForm.className = '';
     isUploadFormVisible = 1;
     $("body").addClass("modal-open");
  });
});

this is assuming that you have included jQuery Mobile in your project. (which I highly recommend you do).