Question

我有一段适用于所有桌面浏览器的代码，包括重新调整大小的代码。但是当我在实际的手机中加载页面或者例如Dev Tools上的Chrome设备模拟器时，点击事件不会启动。任何帮助赞赏。

以下代码：

jQuery(document).on('click', 'area',  function() {
    event.preventDefault();
    var id = jQuery(this).attr('title');
    var iframe = '<iframe id="fploaderframe" frameborder="0" src="'+id+'" allowfullscreen></iframe>';
    jQuery("#heroloader").html(iframe);
    jQuery("#heroloader").fadeIn();
    jQuery(".closethisfp").fadeIn();
    jQuery('.closethisfp').attr('href', '#');
});

我偶然发现了Hammer js。点击活动能够提供帮助吗？

Answer 1

首先，在函数调用中添加参数，使event.preventDefault()起作用：

jQuery(document).on('click', 'area',  function(event) {
    ...
}

如果这不起作用，请尝试这样：

$('area').on('click', function() {
    console.log('test');
});

......或者像这样：

$('area').click(function() {
    console.log('test');
});

你也可以在手机上使用alert而不是console.log来检查回调是否被调用。

如果仍然无效，请尝试使用类作为选择器：

$('.url-area').click(function() {
    console.log('test');
});

Answer 2

可能是您可以尝试添加touchstart事件。像这样：

jQuery(document).on('click touchstart', 'area',  function(event) {
 ...
}

物理手机上的Jquery点击事件问题

2 个答案: