一键式按钮适用于大屏幕，但在电话设备上只能双击才能使用

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 ).这是在 angular 中。我有一个按钮，只需单击一下即可在大屏幕（例如 macbook）上完美运行，但是当它在 iPhone 上时，它只能通过双击运行（在 android 上运行良好）。 It is supposed to work on oneclick aswell.它应该也适用于 oneclick。 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();
        
    }

Answer 1

It works well with chromium browsers, but it may not work with safari sometimes.它适用于 chromium 浏览器，但有时可能不适用于 safari。 The best method would be to use the jQuery and use the touchstart event instead of the onclick event on the button.最好的方法是使用 jQuery 并使用 touchstart 事件而不是按钮上的 onclick 事件。 Or, just to cover all grounds, you can also use the ontouchstart event on the element too.或者，为了涵盖所有方面，您也可以在元素上使用ontouchstart事件。

So, if the HTML code looks like this,所以，如果 HTML 代码看起来像这样，

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

Then we can add this line in the <button> element然后我们可以在<button>元素中添加这一行

ontouchstart="myFunction()" and define your myFunction() in JS. ontouchstart="myFunction()"并在 JS 中定义您的myFunction() 。 But one safer way to do that( safer: works in all ) is to use jQuery但是一种更安全的方法（更安全：适用于所有人）是使用jQuery

Just Insert any jQuery CDN in your head section of your html and add this line in the JS and define the element只需在 html 的头部部分插入任何 jQuery CDN，然后在 JS 中添加这一行并定义元素

$(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如果您使用 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