今天做了个手机页面，点击某个按钮->弹出菜单，再点击菜单以外的任意位置->关闭菜单，在其他浏览器里面没有问题，但是在IOS浏览器中并不会关闭。

网上解决这个bug的帖子很多，这篇帖子主要是讲原理，这里写个简单的代码，大家可以复制到自己页面中去实验：

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

</head>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<style>

*{min-height:100px; line-height:100px;}

body{ background:#ddd;}

a,input{display:block;}

div{background:#9CF;}

</style>

<body>

    <a href="#" >链接</a>

    <input type="button" value="按钮"/>

    <div>div或span等</div>

</body>

</html>

<script>

$("body").bind("click",function(){

    alert("body 被点击")

})

</script>

上面这段代码在其他浏览器里面没有问题，在IOS的浏览器中，点击链接和按钮都会有弹窗，但是点击其他区域却没有。

原因是因为IOS浏览器的按钮和链接才响应click事件，其他标签不响应，所以点击链接和按钮之外的其他地方并不会把click事件冒泡到body上。

我们做一个比喻来理解这个事件是怎么运作的：

屏幕被点击后，系统会发送一个事件公告(click),链接和按钮收到这个公告后会处理相应的行为（比如打开个新页面，提交表单，用户绑定的其他行为）
window、document、body、div并不会搭理这个公告，跟没看到似的，自然也就没有弹窗出现
body只接受内部的冒泡事件，点击按钮后触发了按钮的click事件，然后按钮会告诉自己的上级（body）：老大，我被点击了，
body会说：好的，我会处理的，这时候弹窗就出来了。
body里面的div，span等标签默认是不会理睬click事件公告的，但是我们可以开启他，开启后他们就跟按钮一样，可以接受click事件，并汇报给上级。
开启方法：给标签绑定一个任意事件↓

1.HTML标签中添加事件属性

<div onMouseOver>div或span等</div>

<div onClick>div或span等</div>

<div onKeyDown>div或span等</div>

2.用js或者jquery绑定一个事件

$("body div").bind("click",function(){})

所以最后我们的弹出菜单可以这样写

/*给body里面的任意元素绑定事件，让这些标签能接受click事件*/
$("body>*").bind("click",function(){});

$("#button").bind("click",function(e){/*给按钮绑定点击事件*/
    $("#menu").show();//按钮点击后显示菜单
    
    $("body").one("click",function(){/*菜单显示后：给body绑定点击事件，执行一次后自动删除这个绑定*/
        $("#menu").hide();//body收到click事件后关闭菜单
    });
    e.stopPropagation();//停止冒泡，按钮被点击后不告诉body，因为click事件如果冒泡到body会关闭菜单。

})
$("#menu").bind("click",function(e){/*给菜单绑定点击事件*/
　　 e.stopPropagation();//停止冒泡，菜单被点击后不告诉body，不然菜单要被关闭
})
 

click事件触发也有失灵的时候？的更多相关文章

  1. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  2. checkbox：click事件触发文本框显示隐藏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. checkbox：click事件触发span元素内容改变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 隔离click事件

    有一些应用,不需要我们自己的定义的click函数,例如: $(document).on('click', '#inp', function(e){ alert('hello world!'); }); ...

  5. ［ 面试没回答上的问题2］IOS上给body绑定click事件的bug

    面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...

  6. 移动端web，tap与click事件

    一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...

  7. IOS上给body和html绑定click事件的坑

    场景: 在ios上(包括iPhone和ipad) 给window ,html,document,body绑定click事件,点击不会触发 由于ios浏览器都用的safari内核,所以ios浏览器全部中 ...

  8. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  9. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

随机推荐

  1. python队列的实现

    队列是一种抽象数据结构,具有以下特点: (1)具有先进先出的特性(FIFO) (2)拥有两种基本操作,即加入和删除,而且使用front和rear两个指针来分别指向队列的前端和末尾. 队列的基本操作 c ...

  2. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  3. iOS多媒体框架介绍

    媒体层 媒体层包含图形技术.音频技术和视频技术,这些技术相互结合就可为移动设备带来最好的多媒体体验,更重要的是,它们让创建外观音效俱佳的应用程序变得更加容易.您可以使用iOS的高级框架更快速地创建高级 ...

  4. [C++] 化学方程式的格式化算法

    网上普遍使用的化学方程式的格式普遍如下 例: KMnO4+FeSO4+H2SO4=Fe2(SO4)3+MnSO4+K2SO4+H2O 要把化学方程式格式化,单单一个正则表达式是非常反人类的,故可选用 ...

  5. linux which-查找并显示给定命令的绝对路径

    推荐:更多Linux 文件查找和比较 命令关注:linux命令大全 which命令用于查找并显示给定命令的绝对路径,环境变量PATH中保存了查找命令时需要遍历的目录.which指令会在环境变量$PAT ...

  6. layui laypage 当前页刷新问题

    困扰了好几天的问题,终于找到答案了 在执行完代码后添加下面的代码实现当前页的刷新 $(".layui-laypage-btn").click(); 在解决问题的过程中,其实已经注意 ...

  7. 二、第一个ECharts图表

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</t ...

  8. [luoguP2858] [USACO06FEB]奶牛零食Treats for the Cows（DP）

    传送门 f[i][j][k] 表示 左右两段取到 i .... j 时,取 k 次的最优解 可以优化 k 其实等于 n - j + i 则 f[i][j] = max(f[i + 1][j] + a[ ...

  9. [bzoj3131]淘金[sdoi2013][数位DP]

    求出每个数i可以被转移到的数目$f[i]$,则点$(i,j)$中的金子数目为$f[i]*f[j]$,我们就可以用优先队列求解前$k$大. 首先所有的积数目在$10^4$左右,可以先Dfs搜索出所有的数 ...

  10. 通过代码学习python之@property,@staticmethod,@classmethod

    URL: https://www.the5fire.com/python-property-staticmethod-classmethod.html #coding=utf-8 class MyCl ...