jQuery e.target e is not defined

Question

So, I have multiple div with the same class class="galao" and all of them have a p tag with the same class class="nomeGalao" as well. I'm trying to use a e.target in order to trigger a mouseover event and change the class of that especific p tag (div's child).

Here is my code

$(document).on({
  mouseenter: function() {
    e = e || window.event;
    var target = e.target || e.srcElement;
    $(target).children().addClass('invisible');
  },
  mouseleave: function() {
    e = e || window.event;
    var target = e.target || e.srcElement;
    $(target).children().addClass('invisible');
  }
}, ".galao");

.invisible {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="" class="galao">
  <div class="informacoesGalao">
    <div class="tabelaInformacoes infoGalao" style="float:right; text-align:right">
      <p class="invisible nomeGalao">Produto A</p>
    </div>
  </div>
</div>
<div id="" class="galao">
  <div class="informacoesGalao">
    <div class="tabelaInformacoes infoGalao" style="float:right; text-align:right">
      <p class="invisible nomeGalao">Produto B</p>
    </div>
  </div>
</div>

The problem is that I'm getting a undefined e, even when I'e already used a e.target in another function.

You need to define elements context in functions argument `mouseenter: function (e) {` and `mouseleave: function (e) {` — Milind Anantwar, Mar 21 '17 at 13:40
you have to receive the event object in your event handler functions — abhishekkannojia, Mar 21 '17 at 13:40
`e` is an argument for your functions as your code is now, it's perfectly correct that it is undefined — Icepickle, Mar 21 '17 at 13:40
[get the event object in an event handling function without pass the event object as parameters](http://stackoverflow.com/q/5849370/3543808) will help you — Gangadhar Jannu, Mar 21 '17 at 13:45

Bergi · Answer 1 · 2017-03-21T13:49:17.510

e is expected to be the parameter of your event handler function. Notice that you don't need to do the e = e || window.event; var target = e.target || e.srcElement;, that's exactly the kind of normalisation that jQuery handles for you. Just use e.target directly:

$(document).on({
    mouseenter: function(e) {
        $(e.target).children().removeClass('invisible');
    },
    mouseleave: function(e) {
        $(e.target).children().addClass('invisible');
    }
}, ".galao");

score 2 · Answer 2 · edited Mar 21 '17 at 13:44

2

Add parameters to your function :

function(e){}

edited Mar 21 '17 at 13:44

Satpal

132,252
13
159
168

answered Mar 21 '17 at 13:41

Lionel B

1,172
2
9
24

Ok that will do. Thanks! – Pedro Gonçalves Mar 21 '17 at 13:45

score 1 · Answer 3 · answered Mar 21 '17 at 13:43

If i understand you correctly following will help you

You are missing parameter e in mouseenter and mouseleave function

$(document).on({
  mouseenter: function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    $(target).children().addClass('invisible');
  },
  mouseleave: function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    $(target).children().addClass('invisible');
  }
}, ".galao");

.invisible {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="" class="galao">
  <div class="informacoesGalao">
    <div class="tabelaInformacoes infoGalao" style="float:right; text-align:right">
      <p class="invisible nomeGalao">Produto A</p>
    </div>
  </div>
</div>
<div id="" class="galao">
  <div class="informacoesGalao">
    <div class="tabelaInformacoes infoGalao" style="float:right; text-align:right">
      <p class="invisible nomeGalao">Produto B</p>
    </div>
  </div>
</div>

Yeah it works fine. Thanks a lot! – Pedro Gonçalves Mar 21 '17 at 13:44 — Pedro Gonçalves, Mar 21 '17 at 13:44

score 0 · Answer 4 · answered Mar 21 '17 at 13:44

0

$(document).on({
     mouseenter: function (e) {
      var target = e.target || e.srcElement;
      ....
  },
     mouseleave: function (e) {
       ....
   }
  }, ".galao");

answered Mar 21 '17 at 13:44

Raja Khoury

3,015
1
20
19

score 0 · Accepted Answer · answered Mar 21 '17 at 13:44

Replace what you have with this:

<script>
    $(document).on({
       mouseenter: function (e) {
          e = e || window.event;
          var target = e.target || e.srcElement;
          $(target).children().removeClass('invisible');
    },
       mouseleave: function (e) {
          e = e || window.event;
          var target = e.target || e.srcElement;
          $(target).children().addClass('invisible');
       }
    }, ".galao");
</script>

To explain, you need to pass 'e' as a parameter through your function, 'e' being the event. The links below may be helpful as well for your own personal reading:

http://javascript.info/tutorial/obtaining-event-object

https://www.w3schools.com/js/js_function_parameters.asp

score 0 · Answer 6 · answered Mar 21 '17 at 13:44

You have to add a parameter to your function:

$(".nomeGalao").on("mouseenter", function(e){
      e = e || window.event;
      var target = e.target || e.srcElement;
      $(target).children().removeClass('invisible');
});

It is not going to work since you have no e object inside of your function. e stands for the event object, so please read the following: https://api.jquery.com/category/events/event-object/

jQuery e.target e is not defined

6 Answers6