Skip to content

Instantly share code, notes, and snippets.

@dyun8080

dyun8080/ios-body-click-buggle-bug.html

Last active June 3, 2019 02:26
Show Gist options
  • Save dyun8080/81ab54d46f0a61cd9d07e6a03eff88e9 to your computer and use it in GitHub Desktop.
Save dyun8080/81ab54d46f0a61cd9d07e6a03eff88e9 to your computer and use it in GitHub Desktop.
Download ZIP
ios 在 body 上绑定 click 会不起作用的问题
Raw
ios-body-click-buggle-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>
Raw
ios-body-click-buggle-fixed.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>
@dyun8080
Copy link
Author

影响

  • 给 body 注册 click 事件, 会没有效果
  • 通过 body 代理 click 事件(实质上也是给 body 注册 click 事件), 会没有效果

解决方案

  • 使用本机可点击的元素，例如 a 或按钮。
  • 保证每一个元素在点击的时候都有 cursor:pointer 效果

参考

On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:

  • Use natively clickable elements such as a or button, as both of these do bubble to document.
  • Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
  • Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.

@dyun8080
Copy link
Author

ios 上出现点击遮罩 html 的情况

影响

在点击屏幕（一般是下方的时候）会出现遮罩

这种情况很有可能是因为 window 的高度小于设备的高度，可通过 min-height: 100% 来优化

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment