ufologist/ios-body-click-bubble-bug.html

## ios-body-click-bubble-bug.html
<!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>

## ios-body-click-bubble-fix.html
<!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>
	<!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>