JavaScript onclick 事件在移动设备上不起作用

Question

我们是运行 Opencart 1.5.6.4，它使用以下代码将商品添加到购物车。

<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />

我们注意到，在移动设备上，Javascript onclick 事件似乎不起作用。

javascript函数如下

function addToCart(product_id, quantity) {
    quantity = typeof(quantity) != 'undefined' ? quantity : 1;

        $.ajax({
            url: 'index.php?route=checkout/cart/add',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + quantity,
            dataType: 'json',
            success: function(json) {
                $('.success, .warning, .attention, .information, .error').remove();

                if (json['redirect']) {
                    location = json['redirect'];
                }

                if (json['success']) {
                    $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                    $('.success').fadeIn('slow');

                    $('#cart-total').html(json['total']);

                    $('html, body').animate({ scrollTop: 0 }, 'slow'); 
                }   
            }
        });
    }

Answer 1

尝试在 AJAX 后使用 return false 停止冒泡。

Answer 2

检查此函数是否甚至运行。也许放一些console.log。

关于@volodymyr-duday anwser：不是return false，事件对象stopPropagation().

中有一个方法

如果函数没有运行，请尝试将其附加到触摸事件，例如 touchend。

Answer 3

尝试在您的代码中添加触摸事件。

$("input.button").on("click touchend", function () {
    addToCart($(this).attr("data-product-id"));
});

function addToCart(product_id, quantity) {
    quantity = typeof(quantity) != 'undefined' ? quantity : 1;

    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: 'product_id=' + product_id + '&quantity=' + quantity,
        dataType: 'json',
        success: function(json) {
            $('.success, .warning, .attention, .information, .error').remove();

            if (json['redirect']) {
                location = json['redirect'];
            }

            if (json['success']) {
                $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

                $('.success').fadeIn('slow');

                $('#cart-total').html(json['total']);

                $('html, body').animate({
                    scrollTop: 0
                }, 'slow');
            }
        }
    });
}

html:

<input type="button" value="<?php echo $button_cart; ?>" data-product-id="<?php echo $product['product_id']; ?>" class="button" />

您可以找到更多关于触摸事件的参考资料here。

Answer 4

我看到你用的是jQuery。如果您的点击事件没有触发，您可以尝试

$(document).ready(function(){
    $("[your-selector-here]").on("click touchstart", function(){
        //do stuff
    });
});

否则，我看到你的方法需要 2 个参数，但在你的事件中你只有一个

function addToCart(product_id, quantity){}

onclick="addToCart('<?php echo $product['product_id']; ?>');"

Answer 5

Ajax 由于 www.网站缺失 URL.

JavaScript onclick 事件在移动设备上不起作用

JavaScript onclick event not working on mobile device

html

javascript

onclick

opencart