Question

我已经建立了一个网站，而台式机版本完成后，我仍在与移动网站作战。因此，无论如何，使用js来完成任务的每个按钮都不起作用，而带有链接的普通按钮就可以正常工作。使用“切换设备工具栏”选项在chrome上也不会出现此问题，该选项应从技术上模拟触摸事件。

这是示例按钮的外观：

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

这是使用它的js：

$(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

不能确切地说出为什么发生这种情况。

但这可能是事实。我们应该禁用浏览器的默认行为。

由于它是anchor标记，因此浏览器具有自己的处理方式。

像这样修改您的代码

$(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");

  });
}

希望这会有所帮助。

Answer 2

尝试将touchstart替换为tap

$(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");
  });
});

这是假设您在项目中包含了jQuery Mobile。（我强烈建议您这样做）。

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

2 个答案: