。点击

Question

我通常使用表单

绑定点击处理程序

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

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

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

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

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

Answer 1

我查看了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，而不是您的情况）

Answer 2

我认为这是由于移动浏览器延迟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元素，将生成一个点击事件，该事件将在所有祖先元素中冒泡（旁注：在此之前实际上有一个阶段，称为＆＃39;捕获阶段＆＃39;，当事件从树下到目标）。您可以捕获任何这些祖先的事件。

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

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

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

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

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

例如：

$(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>');
});

在这个例子中，只有＆＃34;绑定到文档＆＃34;警报会开火。

JSFiddle with jQuery 1.9.1

$（文档）.on点击处理程序和标准点击处理程序在iOS上表现不同

2 个答案:

。点击