Created
September 19, 2017 09:06
-
-
Save ufologist/b31e0ec1af14d4ea24bde3c28731901e to your computer and use it in GitHub Desktop.
iOS body click 事件冒泡的 bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>iOS body click 事件冒泡的 bug</title> | |
| </head> | |
| <body> | |
| <h1>点击 h1 不会冒泡到 body</h1> | |
| <p>点击 p 不会冒泡到 body</p> | |
| <div>点击 div 不会冒泡到 body</div> | |
| <br> | |
| <span>点击 span 不会冒泡到 body</span> | |
| <br> | |
| <br> | |
| <a href="#">点击 a 之类本身就具备交互功能的元素才能冒泡到 body</a> | |
| <input type="text"> | |
| <select name="" id=""></select> | |
| <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> | |
| <script> | |
| // 影响1: 给 body 注册 click 事件, 会没有效果 | |
| document.body.addEventListener('click', function() { | |
| alert('body'); | |
| }, false); | |
| // 影响2: 通过 body 代理 click 事件(实质上也是给 body 注册 click 事件) | |
| $(document.body).on('click', 'h1, p, div, span', function(event) { | |
| alert(event.target.tagName); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <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"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>iOS body click 事件冒泡的 bug(修复方法)</title> | |
| </head> | |
| <body style="cursor: pointer;"> | |
| <h2>神奇的 <code>cursor: pointer;</code></h2> | |
| <p>可以直接在 body 上面添加或者在每个不具备交互功能的元素上添加</p> | |
| <h1>点击 h1 冒泡到 body</h1> | |
| <p>点击 p 冒泡到 body</p> | |
| <div>点击 div 冒泡到 body</div> | |
| <br> | |
| <span>点击 span 冒泡到 body</span> | |
| <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> | |
| <script> | |
| document.body.addEventListener('click', function() { | |
| alert('body'); | |
| }, false); | |
| $(document.body).on('click', 'h1, p, div, span', function(event) { | |
| alert(event.target.tagName); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
学习了~