<body>只可點擊這裏子元素填充

我使用的是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是點擊。這裏我使用了touchstarteventListener。

任何人都可以指向正確的方向嗎？

乾杯，丹

來源

2016-08-02 Dan Schalow

最後，這是亟待解決的同事如下：

通過用戶代理檢測iPhone
如果iPhone，然後結合touchstart,touchmove和touchendeventListeners，以確定用戶是否只是「點擊」或實際上「刷卡」 /「滾動」屏幕
如果使用點擊，打開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

來源

2016-08-04 05:59:52

虛假代碼：

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

真代碼：

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

來源

2016-08-02 11:33:13

嘿，感謝回答。此代碼將事件附加到文檔而不是正文。此代碼也會導致相同的行爲。對不起：/ –

你必須改變你的CSS真正充滿整個屏幕。即使背景是藍色的，您也可以看到您的鼠標光標未正確顯示。

添加

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

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

來源

2016-08-02 11:42:38 Wolfgang

好吧，我也試過這個。問題是，你無法在iPhone上點擊，而你在桌面上。然而'touchstart'事件似乎有效。 –

適用於我的iPhone 4 – Wolfgang

啊。有趣。我的第一個小提琴是否在4上工作？我們一直在測試6S。 iOS 9.3.3 –

<body>只可點擊這裏子元素填充

回答

相關問題