一鍵式按鈕適用於大屏幕，但在電話設備上只能雙擊才能使用

Question

這是在 angular 中。我有一個按鈕，只需單擊一下即可在大屏幕（例如 macbook）上完美運行，但是當它在 iPhone 上時，它只能通過雙擊運行（在 android 上運行良好）。 它應該也適用於 oneclick。 警報是在單擊時觸發的，而不是照片上傳時觸發的。 有人可以知道為什么會這樣嗎？ 謝謝。

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

Answer 1

它適用於 chromium 瀏覽器，但有時可能不適用於 safari。 最好的方法是使用 jQuery 並使用 touchstart 事件而不是按鈕上的 onclick 事件。 或者，為了涵蓋所有方面，您也可以在元素上使用ontouchstart事件。

所以，如果 HTML 代碼看起來像這樣，

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

然后我們可以在<button>元素中添加這一行

ontouchstart="myFunction()"並在 JS 中定義您的myFunction() 。 但是一種更安全的方法（更安全：適用於所有人）是使用jQuery

只需在 html 的頭部部分插入任何 jQuery CDN，然后在 JS 中添加這一行並定義元素

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

和例子：

 /*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>

如果您使用 bootstrap 但仍然不起作用，您可能需要參考此線程： Button not working on Mobile Devices but works on PC bootstrap

一鍵式按鈕適用於大屏幕，但在電話設備上只能雙擊才能使用

問題描述

1 個解決方案

解決方案1
0 2021-01-28 15:33:32

一鍵式按鈕適用於大屏幕，但在電話設備上只能雙擊才能使用

問題描述

1 個解決方案

解決方案1 0 2021-01-28 15:33:32

解決方案1
0 2021-01-28 15:33:32