今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在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. JavaScriptav数据类型和变量

    数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...

  2. ERwin逻辑模型

    1.自动排序 Format>>Preferences>>Layout Entire Diagram CA ERwin

  3. Pytorch 加载保存模型【直播】2019 年县域农业大脑AI挑战赛---(三)保存结果

    在模型训练结束,结束后,通常是一个分割模型,输入 1024x1024 输出 4x1024x1024. 一种方法就是将整个图切块,然后每张预测,但是有个不好处就是可能在边界处断续. 由于这种切块再预测很 ...

  4. Linux System

    Linux System linux 是一个功能强大的操作系统,同时它是一个自由软件,是免费的.源代码开放的,编制它的目的是建立不受任何商品化软件版权制约的.全世界都能自由使用的UNIX兼容产品.各种 ...

  5. CentOS下安装微软雅黑字体

    CentOS下安装微软雅黑字体   微软雅黑下载地址:http://download.csdn.net/detail/u012547633/9796219 1.先从你本机 C:\Windows\Fon ...

  6. acm学习指引

    acm学习心得及书籍推荐   一般要做到50行以内的程序不用调试.100行以内的二分钟内调试成功.acm主要是考算法的,主要时间是花在思考算法上,不是花在写程序与debug上. 下面给个计划练练: 第 ...

  7. 洛谷——P1404 平均数

    P1404 平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 前缀和+二分答案 #include<iostream> ...

  8. poj3061 Subsequence【尺取法】

    Description A sequence of N positive integers (10 < N < 100 000), each of them less than or eq ...

  9. Linux配置网卡、网卡会话、网卡bonding

    配置网卡  1.路径:  /etc/sysconfig/network-scripts/ifcfg-eno16777728 2.含义:HWADDR=00:0C:29:9C:D6:4D   Mac地址 ...

  10. 1.Ubuntu查看Python版本

    1.输入命令:ls -l /usr/bin/python*