<body> nur anklickbar, wo Kind Elemente es füllen

Bitte meine JS Fiddle sowohl auf Desktop-und iPhone sehen:<body> nur anklickbar, wo Kind Elemente es füllen

Ich verwende ein click eventListener auf document.body:

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

ich den Hintergrund gefüllt in blau, so dass Sie sehen können, dass der gesamte Rahmen vom Körper gefüllt wird und ihm eine Höhe von 100vh gegeben wird.

Ich habe ein Kindelement für das iPhone eingefügt.

Auf dem Desktop werden Sie feststellen, dass Sie eine Warnung erhalten, unabhängig davon, wo Sie auf body klicken. Auf dem iPhone wird die Warnung nur angezeigt, wenn Sie auf das untergeordnete Element klicken. Ich kann nur annehmen, dass das Kindelement den Körper mit etwas Raum füllt, auf den Sie klicken können - unabhängig von der Höhe, auf die der Körper eingestellt ist.

Interessanterweise gibt document.body.clientHeight einen Wert zurück, der vorschlagen würde, dass die body eine anständige anklickbare Größe hat.

Nun, wenn Sie den Kopf über: https://jsfiddle.net/5t8arze9/1/

Sie werden feststellen, dass die gesamte body anklickbar. Hier habe ich die touchstarteventListener verwendet.

Kann mir jemand in die richtige Richtung zeigen?

Cheers, Dan

Quelle

2016-08-02 Dan Schalow

Am Ende ein Kollege dieses wie folgt gelöst wurde:

Detect iPhone via User-Agent
Wenn iPhone, dann kombinieren touchstart, touchmove und touchendeventListeners, um festzustellen, ob der Benutzer nur ‚angeklickt‘ oder eigentlich ‚geklaut‘/‚gescrollt‘ den Bildschirm
Wenn die Verwendung geklickt hat, öffnen URL, wenn nicht - ignorieren
Non iPhones die normalen click Zuhörer

gesetzt bekommen

Code:

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); 
    }); 
}

Dies ist jedoch leider nicht ganz beantwortet warum. Dies ist etwas vage hier erklärt:

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

Quelle

2016-08-04 05:59:52

Falsch-Code:

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

Wahre Code:

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

Quelle

2016-08-02 11:33:13

Hey, danke für die Beantwortung. Dieser Code hängt das Ereignis an das Dokument und nicht an den Text an. Dieser Code führt auch zu demselben Verhalten. Sorry:/ –

Sie haben Ihre CSS zu ändern wirklich um den Bildschirm zu füllen. Selbst wenn der Hintergrund blau ist, können Sie sehen, dass Ihr Mauszeiger nicht korrekt angezeigt wird.

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

Geige (Update) hinzufügen: https://jsfiddle.net/5jb3x5cn/10/

Quelle

2016-08-02 11:42:38 Wolfgang

Gut entdeckt, das hatte ich auch schon ausprobiert. Das Problem ist, dass Sie nicht auf das iPhone klicken können und Sie sich auf dem Desktop befinden. Das "Touchstart" -Ereignis scheint jedoch zu funktionieren. –

funktioniert auf meinem iphone 4 – Wolfgang

Ah. Interessant. Hat meine erste Geige an der 4 gearbeitet? Wir haben an einem 6S getestet. iOS 9.3.3 –

<body> nur anklickbar, wo Kind Elemente es füllen

Antwort

Verwandte Themen