实体手机上的jquery点击事件问题答案

【问题标题】：Jquery click event issue on physical mobile phones实体手机上的jquery点击事件问题
【发布时间】：2016-06-03 03:13:21
【问题描述】：

我有一段代码适用于所有桌面浏览器，包括调整大小的浏览器。但是当我在实际的手机或开发工具上的 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。点击事件能帮上忙吗？

【问题讨论】：

标签： android jquery ios mobile responsive-design

【解决方案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');
});

【讨论】：

【解决方案2】：

也许您可以尝试添加 touchstart 事件。像这样：

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

【讨论】：