【问题标题】：$(document).on click handler and standard click handler behaving differently on iOS$(document).on 点击处理程序和标准点击处理程序在 iOS 上的行为不同
【发布时间】：2017-01-10 11:50:18
【问题描述】：

我一般使用表单绑定点击处理程序，

$(document).on('click', 'element', function() { ... });

以避免稍后加载元素的问题。这在桌面浏览器（以及模拟 iPhone 的 Chrome）上正常工作，但在实际的 iPhone 上却无法正常工作（我尝试了 solutions 就像 'cursor: pointer;'）

我注意到另一个按钮正在工作，使用标准的点击处理程序。我更改了我的新按钮以使用

$('element').click(function() { ... });

它开始工作了。为什么这两种应用点击处理程序的方法在 iOS 上的操作不同？

【问题讨论】：

经过测试，这两种方式都适用于我的iPhone 6 Plus，iOS 9.3.3。
你能发布一个演示页面吗？
@ElfSundae 我会尝试提取核心并放在一起，它不大，所以应该可以。
在我看来是缓存问题。尝试清空缓存。
触摸设备上的点击事件有点棘手。看看这里：stackoverflow.com/questions/15095868/…

标签： jquery ios iphone

【解决方案1】：

我认为这是由于移动浏览器的 300 毫秒延迟所致。

根据谷歌：

...移动浏览器将等待大约 300 毫秒你点击按钮来触发点击事件。这样做的原因是浏览器正在等待查看您是否真的在执行双击。

我的一个客户项目遇到了同样的问题，为此我使用了https://github.com/ftlabs/fastclick 库来消除移动浏览器上物理点击和点击事件触发之间的 300 毫秒延迟。

你也可以试试https://github.com/dave1010/jquery-fast-click

在同一个项目中，我还遇到了下拉菜单的双击问题，这也是由于 300 毫秒的延迟。

双击问题出现在 Android 浏览器/设备中，因此我检测到了用户代理并应用了自定义函数来处理该问题，这可能对您有所帮助。

<?php 
 if (user_agent() == 'android') {
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\"";
    $homePage = "#";
} else {
    $handleClick = " ";
    $homePage = "index.php";
}
?>

<!--//Script to Handle menu for mobile devices-->
<script type="text/javascript">
//handle 300ms delay click in android devices
var clicks = 0;
function checkClicks(e) {
    clicks = clicks + 1;
    if (clicks == 2) {
        window.location = e;
    } else {
        //do nothing
    }
}
</script>

如果你遇到这个问题，你也可以尝试一些可用的插件来解决这个问题。

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

这也可能对您有所帮助。

已编辑

事件处理程序绑定到 DOM 树（在本例中为文档）更高层的元素，并且当事件到达该元素时执行，该元素源自与选择器匹配的元素。

这是可能的，因为大多数 DOM 事件从源点开始向上冒泡。如果单击#id 元素，则会生成一个单击事件，该事件将在所有祖先元素中冒泡（旁注：实际上在此之前有一个阶段，称为“捕获阶段”，当事件从树上下来时到目标）。您可以在这些祖先中的任何一个上捕获事件。

第二个示例将事件处理程序直接绑定到元素。事件仍然会冒泡（除非您在处理程序中阻止它），但由于处理程序绑定到目标，您将看不到此过程的效果。

通过委派事件处理程序，您可以确保对绑定时 DOM 中不存在的元素执行它。如果您的 #id 元素是在您的第二个示例之后创建的，则您的处理程序将永远不会执行。通过绑定到在执行时您知道肯定在 DOM 中的元素，您可以确保您的处理程序实际上会附加到某些东西，并且可以在以后适当地执行。

可能由于以下原因之一无法正常工作：

未使用最新版本的 jQuery
未将代码包装在 DOM 中准备就绪
或者您正在做的事情导致事件不会冒泡到文档上的侦听器。

要捕获在声明事件侦听器之后创建的元素上的事件 - 你应该绑定到父元素或层次结构中更高的元素。

例如：

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

在本例中，只会触发“绑定到文档”警报。

JSFiddle with jQuery 1.9.1

【讨论】：

不要担心 - 无论我点击多少次，该按钮都不会起作用，并且它会在第一次点击标准点击时立即起作用。
你为什么不这样使用它？ $("element").on("click", function(){ //做点什么 });

【解决方案2】：

我查看了 jquery 源代码，它们是相同的（.click 和 on('click') 使用相同的功能，即 .on。

.点击

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup contextmenu" ).split( " " ),
    function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
} );

如您所见，$.click 最终将调用.on（或.trigger，如果不存在参数，则不是您的情况）

【讨论】：

很公平 - 它一定是无关的。