<body> 仅在 child 元素填充的位置可点击

Question

请在桌面和 iPhone 上查看我的 JS Fiddle:

我在 document.body 上使用 click eventListener:

document.body.addEventListener('click', function(){
    alert(1);
})

我用蓝色填充了背景，这样你就可以看到整个框架都被 body 填充，并给它一个 100vh.

的高度

我为iPhone插入了一个child元素。

在桌面上，您会注意到无论在何处单击 body，您都会收到警报。在 iPhone 上，仅当您单击 child 元素时才会显示警报。我只能假设 child 元素 'fills' body 和一些 space，您可以在其中单击 - 无论 body 设置的高度如何。

有趣的是 document.body.clientHeight returns 这个值表明 body 具有不错的可点击大小。

现在如果你前往：https://jsfiddle.net/5t8arze9/1/

您会注意到整个 body 都是可点击的。这里我使用了touchstarteventListener。

有谁能body给我指出正确的方向吗？

干杯，旦

Answer 1

错误代码：

document.body.addEventListener('click', function(){
    alert(1);
})

真实代码：

document.addEventListener("click", function(){
    alert(1);
});

Answer 2

您必须更改 CSS 才能真正填满屏幕。即使背景是蓝色的，您也可以看到您的鼠标光标显示不正确。

添加

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

fiddle（更新）：https://jsfiddle.net/5jb3x5cn/10/

Answer 3

最后有同事解决了这个问题如下：

通过用户代理检测iPhone
如果iPhone，则结合touchstart、touchmove和touchend eventListeners来判断用户只是'clicked'还是实际上'swiped'/'scrolled'屏幕
如果使用点击，打开 URL，如果没有 - 忽略
非 iPhone 获得正常 click 侦听器集

代码：

if (body.addEventListener) {

if (navigator.userAgent.match(/iPad/i) != null) {

    var startX = 0;
    var startY = 0;
    var endX = 0;
    var endY = 0;

    body.addEventListener('touchstart', function(event) {
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
        endX = 0;
        endY = 0;
    }, false);

    body.addEventListener('touchmove', function(event) {
        endX = event.touches[0].pageX - startX;
        endY = event.touches[0].pageY - startY;
    }, false);

    body.addEventListener('touchend', function(event) {
        if (!endX && !endY) {
            wallpaperClick(event);
        }
        startX = 0;
        startY = 0;
    }, false);

} else {
    body.addEventListener("click", function(event) {
        wallpaperClick(event);
    }, !1);
}

} else {
    body.attachEvent("onclick", function(event) {
        wallpaperClick(event);
    });
}

不幸的是，这并没有完全回答为什么。这在这里有些含糊地解释：

https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

<body> 仅在 child 元素填充的位置可点击

<body> only clickable where child elements fill it

javascript

click

addeventlistener

ios

touchstart