Je cherche à créer tout l'arrière-plan / corps d'un projet web sur lequel je travaille pour exécuter une fonction. Serait-il possible de définir le corps comme un lien ou un bouton?

Je veux également que cela reste en arrière-plan, car j'ai un autre lien au début de la page.

<html>
<body>
<a href="">Test link in front of page</a>
<style>
body{
background-color:aqua;
}
a{
color:white;
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
width: 100%; 
text-align: center;
margin: 0; 
}
</body>
</html>

Pour un exemple visuel, j'ai créé un extrait de code. Mon objectif est de faire de cet arrière-plan aqua un lien / bouton (qui exécutera une fonction JS), mais laisse le lien blanc rester à l'avant en tant que lien séparé vers un site Web.

0
makertech81 26 janv. 2019 à 20:01

3 réponses

Meilleure réponse

Vous pouvez ajouter un gestionnaire de clics au document:

document.addEventListener('click', () => console.log("hello"));
document.addEventListener('click', () => console.log("hello"));
body {
  background-color: aqua;
  height: 100%;
}

a {
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  margin: 0;
}
<a href="">Test link in front of page</a>
4
The fourth bird 26 janv. 2019 à 17:10

Comprendre: Je crois que vous voulez qu'une fonction s'exécute chaque fois que l'utilisateur clique sur le corps du document HTML

Suggestion: Vous pouvez ajouter un écouteur d'événements au document, lorsqu'il s'agit d'un clic, puis appelez la fonction souhaitée. S'il doit être spécifiquement le corps et non un élément qui se chevauchent, vous pouvez effectuer un test dans la fonction pour voir si l'élément cliqué était celui que vous aviez prévu. comme e.target.tagName == "BODY"

Exemple d'exécution:

function myFunctionCall(e){
  if (e.target.tagName == "HTML" || e.target.tagName == "BODY"){
    alert ("HEYY YOU CLICKED ME ");
  }
}
document.addEventListener("click", myFunctionCall, false);
body{
  background-color:aqua;
}

a{
  color:white;
  margin: 0; 
  position: absolute; 
  text-align: center;
  top: 50%; 
  transform: translateY(-50%); 
  width: 100%

  
}
<body >
  <a href="" >Test link in front of page</a>
</body>
0
DataCure 26 janv. 2019 à 17:18

Voulez-vous mettre votre corps devant le lien?

<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    *
    {
      box-sizing: border-box;
     }
    body
    {
      background-color:aqua;
    }
    a.back
    {
      color:white;
      position: absolute; 
      top: 50%; 
      transform: translateY(-50%); 
      width: 100%; 
      text-align: center;
      margin: 0; 
      z-index: -1;
    }
    
    p
    {
      width: 50%;
      height: 250px;
      margin: 1% auto;
      padding: 25% 2%;
      background-color: rgba(12, 12, 12, .4);
      text-align: center;
      color: red;
      border-radius: .2rem;
      }
   </style>
</head>
<body>
  <a href="#!" class="back">Test link in front of page</a>
  <p>
  Do you mean something like this ? 
  <br/>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
  </p>
</body>
</html>
0
Samuel 26 janv. 2019 à 17:21