0

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

https://jsfiddle.net/5jb3x5cn/4/

我正在使用click eventListener一个document.body：

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

我用蓝色填充了背景，这样你就可以看到整个框架都被身体填充了，并且高度为100vh.

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

在桌面上，您会注意到无论您在何处单击body. 在 iPhone 上，仅当您单击子元素时才会显示警报。我只能假设子元素用一些空间“填充”主体，您可以在其中单击 - 无论主体设置的高度如何。

有趣的是，document.body.clientHeight返回的值表明body具有不错的可点击大小。

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

你会注意到整个body是可点击的。这里我使用了touchstart eventListener.

谁能指出我正确的方向？

干杯，丹

4

3 回答 3

0

错误代码： 

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

真代码：

document.addEventListener("click", function(){
    alert(1);
});
于 2016-08-02T11:33:13.120 回答
0

最后，一位同事解决了如下问题：

  1. 通过 User-Agent 检测 iPhone
  2. 如果是 iPhone，则结合touchstart，touchmove并touchend eventListeners确定用户只是“点击”还是实际“滑动”/“滚动”屏幕
  3. 如果使用单击，打开 URL，如果不是 - 忽略
  4. 非 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

于 2016-08-04T05:59:52.633 回答
0

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

添加

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

小提琴（更新）：https ://jsfiddle.net/5jb3x5cn/10/

于 2016-08-02T11:42:38.797 回答