1
votes

jQuery déclenche un événement de document dans un DIV

Je suis totalement nouveau sur jQuery. Ce que je voulais faire, c'est empêcher certains événements d'entrer dans un DIV.

J'ai suivi dans ma page

<div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

la superposition a le style suivant

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,0,0,0.5); /* Black background with opacity */
  z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: auto
}

J'ai le code suivant p >

$(document).on(
{
    mousedown:mouseEvent,
    mouseup:mouseEvent,
}); 
$("GameDiv").on(
{
    mousedown:divEvent,
    mouseup:divEvent,
});
function divEvent(e)
{
    console.log("div event"+e);
}
function mouseEvent(e)
{ 
    console.log("doc event" + e);
    var evnt =  jQuery.Event(e.type,e);
    $("GameDiv").trigger(evnt)
}

Exemple en direct:

$(document).on(
{
    mousedown:mouseEvent,
    mouseup:mouseEvent,
}); 
$("GameDiv").on(
{
    mousedown:divEvent,
    mouseup:divEvent,
});
function divEvent(e)
{
    console.log("div event"+e);
}
function mouseEvent(e)
{ 
    console.log("doc event" + e);
    var evnt =  jQuery.Event(e.type,e);
    $("GameDiv").trigger(evnt)
}

  <style>
  #overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,0,0,0.5); /* Black background with opacity */
  z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: auto
}
  </style>

<div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>

Je reçois l'événement de souris de document. Mais je ne reçois pas le 2e événement div.

Qu'est-ce que j'ai fait de mal?

Y a-t-il une meilleure façon de faire cela?

javascript jquery triggers events mousedown

2 commentaires

à cause de la position: fixe et z-index: 200 pour la superposition div, vous ne pouvez jamais recevoir l'événement de GameDiv

Ce que je voulais faire, c'est filtrer l'événement en utilisant cette superposition. Et déclenchez des événements sélectionnés dans le div. Y-a-t'il une façon de le faire?

3 Réponses :

2
votes

Ici, vous avez commis 2 erreurs.

La superposition qui est sur le div auquel vous avez appliqué les événements de souris.
Vous devez utiliser le hashtag # afin de sélectionner par attribut id, vous devez également utiliser le point . lors de la sélection par attribut de classe.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- div class="overlay"></div comented just to illustrate-->
<div id="GameDiv" style="width:1280px; height: 720px;"></div>

#overlay {  position: fixed;  /* Sit on top of the page content */  display: block;  /* Hidden by default */  width: 100%;  /* Full width (cover the whole page) */  height: 100%;  /* Full height (cover the whole page) */  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgba(1, 0, 0, 0.5);  /* Black background with opacity */  z-index: 200;  /* Specify a stack order in case you're using a different order for other elements */  pointer-events: auto}

$(document).on({
  mousedown: mouseEvent,
  mouseup: mouseEvent,
});

$("#GameDiv").on({
  mousedown: divEvent,
  mouseup: divEvent,
});

function divEvent(e) {
  console.log("div event" + e);
}

function mouseEvent(e) {
  console.log("doc event" + e);
  //var evnt = jQuery.Event(e.type, e);
  //$("#GameDiv").trigger(evnt);
  
}

1 commentaires

Merci pour votre réponse. Mais je reçois l'événement doc, mais je ne reçois pas l'événement div.

1
votes

Parce que vous devriez utiliser le sélecteur correct: '#GameDiv' au lieu de simplement 'GameDiv' dans votre js.

0 commentaires

1
votes

Pour obtenir les deux événements, vous pouvez suivre l'extrait de code ci-dessous.

 <div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).on(
{
    mousedown: mouseEvent,
    mouseup: mouseEvent,
});
   
    $("#GameDiv").on({
        "mousedown": divEvent,
        "mouseup": divEvent
    });
    function divEvent(e) {
        console.log("div event" + e);
    }
    function mouseEvent(e) {
        console.log("doc event" + e);
        var evnt = jQuery.Event(e.type, e);
        $("GameDiv").trigger(evnt)
    }
</script>

 #overlay {
  
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,0,0,0.5); /* Black background with opacity */
  z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: auto

<div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).on(
{
    mousedown: mouseEvent,
    mouseup: mouseEvent,
});
    $("#GameDiv").on("mousedown", divEvent);
    $("#GameDiv").on("mouseup", divEvent);
    function divEvent(e) {
        console.log("div event" + e);
    }
    function mouseEvent(e) {
        console.log("doc event" + e);
        var evnt = jQuery.Event(e.type, e);
        $("GameDiv").trigger(evnt)
    }
</script>

Si vous avez vraiment besoin de le faire avec les événements mousedown et mouseup , vous pouvez suivre l'extrait ci-dessous.

p >

 #overlay {
  
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,0,0,0.5); /* Black background with opacity */
  z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: auto
}

<div id="overlay"></div> 
<div id="GameDiv" style="width:1280px; height: 720px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Une autre solution

Reportez-vous à l'extrait ci-dessous pour appeler les deux événements en même temps

#overlay {
  
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(1,0,0,0.5); /* Black background with opacity */
  z-index: 200; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: auto
}

$(document).on(
{
    mousedown: mouseEvent,
    mouseup: mouseEvent,
});
    $("#GameDiv").on("click", divEvent);
    
    function divEvent(e) {
        console.log("div event" + e);
    }
    function mouseEvent(e) {
        console.log("doc event" + e);
        var evnt = jQuery.Event(e.type, e);
        $("GameDiv").trigger(evnt)
    }

6 commentaires

Merci pour votre réponse détaillée. La 3ème méthode fonctionne pour moi. Les 2 autres méthodes ne fonctionnent pas. Peut-être que la façon dont je crée l'événement est fausse?

J'ai remarqué que vous avez supprimé la position de superposition: style fixe. Ce que je veux faire, c'est empêcher certains événements d'entrer dans gamediv. La superposition agit donc comme un filtre. Je ne veux pas que les utilisateurs cliquent directement sur gamediv. Y a-t-il un moyen de faire quelque chose comme ça?

@Janaka Je l'ai supprimé car votre overlay Div se superposait au-dessus de votre GameDiv Div. Ainsi, GameDiv n'a pas été déclenché lors de l'appel en utilisant l'ID.

D'après mes connaissances, ce que je suggérerais, c'est que vous pouvez masquer et afficher les deux divs en utilisant une condition if

Est-ce la bonne façon de créer un événement? var evnt = jQuery.Event (e.type, e);

Vous pouvez consulter ce lien pour vous faire une idée.