关于ios不支持one绑定的click事件的解决方案

工作上有一个功能要实现，这个功能是这样的，右上角有一个展开按钮，点击按钮展示分享、跳转等连接的菜单。

在打开菜单的时候，点击菜单以外的地方关闭菜单。以下是我的源代码：

$('.menu-btn').on('click',function(){
    if ($("#operationWarp").is(":hidden")) {
        $("#operationWarp").show();    //如果元素为隐藏,则将它显现
        $(document).one('click', function () {
            $('#operationWarp').hide();
        })
    } else {
        $("#operationWarp").hide();     //如果元素为显现,则将其隐藏
    }
});

这样的写法在安卓中是现实正确的，没有任何毛病。但是在IOS当中，菜单打开之后，点击菜单以外的地方，无法关闭菜单。

经过问题的排查，找到了问题，ios在用one绑定click事件的时候，触发不了click（具体原因没有深究，如果大家有知道的，欢迎指出），但是如果把click改为touchstart事件，那么事件就能触发，不过改成以下代码后，会出现一个大bug，就是菜单里面的链接分享什么的都不能点。

$(document).one('click touchstart', function () {
    $('#operationWarp').hide();
})

现祭出最后的解决方案，原理是通过fastclick去重置ios和ipad的事件，使用方法十分简单，就是在HTML文件当中映入fastclick，在js里面初始化一下就好，然后其他代码都完全不用改，以下是代码：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <meta name="visual-width" content="750">
    <title>欢乐抽奖</title>
</head>
<body>
    <div class="container">
        
    </div>
    <script type="text/javascript" src="../lib/zepto.min.js"></script>
    <!--在此引入fastclick文件-->
    <script type="text/javascript" src="../lib/fastclick.js"></script>
</body>
</html>

JS:

.$(function(){
    if (window.FastClick) {
        // 初始化fastclick
        window.FastClick.attach(document.body);
    }
    //右上角按钮事件
    $('.menu-btn').on('click',function(){
        if ($("#operationWarp").is(":hidden")) {
            $("#operationWarp").show();    //如果元素为隐藏,则将它显现
            $(document).one('click', function () {
                $('#operationWarp').hide();
            })
        } else {
            $("#operationWarp").hide();     //如果元素为显现,则将其隐藏
        }
    });
});

关于ios不支持one绑定的click事件的解决方案

html:

JS:

猜你喜欢