JQuery 点击事件不适用于移动浏览器中的 iframe

Question

这是我遇到的一个非常具体的问题，但我不知道如何调试它，甚至不知道它是否能在移动浏览器上工作。

我有 2 个页面（都在同一个域上，所以我没有跨域安全策略的问题），一个页面位于另一个页面内的 iframe 中。由于我需要捕获父元素和子元素的点击，因此我创建了一个覆盖 iframe 的 div，然后调用子元素上的 click 方法：

这是我制作的演示代码：

父文件：

<script>
$(document).ready(function()
{
    $("#floating_play_button").click(function()
    {
        alert("just clicked floating_play_button... will try to click iframe's on click for link2");
        $('#slider').contents().find("#link1").click();
    });
});
</script>

<div id="floating_play_button" style="cursor:pointer; left: 0px; top:0px; width:100%; height:395px; position:absolute; border:2px solid red;"></div>
<iframe id="slider" src="slider_test.php" width="957" height="337" frameBorder="1" style="border:2px solid green;" ></iframe>

子页面：

<script>
$(document).ready(function()
{
    $("#link1").click(function()
    {
        alert("#link1 clicked...");
    });
});
</script>

<div id="link1">
    <a href="#">Link 1</a><br />
</div>

这在所有桌面浏览器上都能正常工作，但不适用于 Android 版 Chrome（2013 年 7 月 22 日起的版本）、默认 Android 浏览器、iPad 或 iPhone。

在子页面中，我尝试了这两种形式，但都不起作用：

    $(document).on('click', '#link1', function()
    {
        alert("on click activated for link1");
    });

    $("#link1").click(function()
    {
        alert("#link1 clicked...");
    });

作为补充说明，选择器很好。我可以通过 jQuery 更改文本属性等类似操作，效果很好。我只是无法调用点击事件。

有什么提示或指示吗？

谢谢！

Answer 1

我的答案是基于 ios 的，因为这是我可用的全部，但对于 android 来说可能是相同的。

单击事件在支持触摸的设备上的工作方式略有不同。没有鼠标，因此从技术上讲，没有点击。根据这篇文章 - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - 由于内存限制，单击事件仅从锚点和输入元素模拟和分派。任何其他元素都可以使用触摸事件，或者通过向原始 html 元素添加处理程序来手动初始化单击事件，例如，强制 div 上的单击事件：

$('div').each(function(){
    this.onclick = function() {}
});

现在点击将由div触发，因此可以被jQuery监听。

根据您的情况，您只需将侦听器更改为锚元素：

$("#link1 a").click(function()
{
    alert("#link1 clicked...");
});

或者在 div 上使用触摸事件：

$(document).on('touchstart', '#link1', function()
{
    alert("on click activated for link1");
});

然后像这样触发：

$('#slider').contents().find("#link1").trigger('touchstart');

这是一些实验的小提琴，可能会有所帮助 - http://jsbin.com/ukalah/9/edit