如果您切换上方元素的高度，则触摸设备上的链接可点击区域会出现奇怪的行为。如果您运行以下代码片段（例如，将其保存在本地并使用 chrome 来模拟触摸事件），您会注意到哈希值#mylink在某些情况下，您没有点击红色链接区域，会将 url 添加到 url 中。而且有时你点击红色区域，它不会被添加。
E.g.
- 如果单击上部灰色区域（前 200 像素），灰色区域会切换高度。 => 好的。
- 如果单击增强的下部灰色区域 (200px - 400px)，
#mylink添加到网址中，就像您单击了红色链接区域一样。 => 为什么？
- 如果单击上方的红色区域（前 200px，灰色区域最小化），
#mylink未添加到网址中。 => 为什么？
- 如果点击下方的红色区域（最后200px，灰色区域增强），
#mylink未添加到网址中。 => 为什么？
<html>
<head>
<style type="text/css">
.test {
background: grey;
height: 200px;
}
.test.is-visible {
height: 400px;
}
.link {
height: 600px;
display: block;
background: red;
}
</style>
<script type="text/javascript">
(function() {
window.addEventListener( 'touchstart' , function() {
document.getElementsByClassName("test")[0].classList.toggle('is-visible');
});
})();
</script>
</head>
<body>
<div class="test">
Click the grey area. Element enhances and minimizes itself. Now click on the lower half of the enhanced grey area (if grey = enhanced) or on the white area up to 200px below of the red area (if grey = minimized). #mylink is added to the url as if you had clicked on the red area. Why?
</div>
<a href="#mylink" class="link">The red area is the "normal" click area.</a>
</body>
</html>
我在 iOS、Android 上尝试过，并在 Chrome 和 Firefox 中模拟了触摸事件。他们的行为都是一样的。
如果我听click代替touchstart or touchend事件，它按预期工作。
造成这种差异的原因是什么？如果我监听触摸事件而不是点击事件，为什么链接区域会不同/错位？
这是当您增强灰色区域并触摸下半部分时会发生的情况：
- 当您触摸灰色区域的下半部分时，您的
touchstart事件被触发
- 您的函数运行并切换（删除）
is-visible灰色元素上的类
- 灰色元素的高度变小
- 红色元素移动
200px upwards
- 您的触摸并未移动，但页面上的元素已移动 - 您现在正在触摸红色元素
- 当您松开触摸时，
touchend事件在红色元素上触发，该事件是确定链接是否被触摸的事件
当您点击该区域时也会发生同样的事情200px红色元素下方：
- 当您触摸红色元素下方的区域时，您的
touchstart事件被触发
- 您的函数运行并切换（添加）
is-visible灰色元素上的类
- 灰色元素的高度变大
- 红色元素移动
200px向下
- 您的触摸并未移动，但页面上的元素已移动 - 您现在正在触摸红色元素
- 当您松开触摸时，
touchend事件在红色元素上触发，该事件是确定链接是否被触摸的事件
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
