Question

因此，我有多个div具有相同的类class="galao"，并且所有这些p标记都具有相同的类class="nomeGalao"。我正在尝试使用e.target来触发mouseover事件并更改该特定p标记（div的子项）的类。

这是我的代码

$(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>

问题是我得到了一个未定义的e，即使我已经在另一个函数中使用了e.target。

Answer 1

e应该是您的事件处理函数的参数。请注意，您不需要执行e = e || window.event; var target = e.target || e.srcElement;，这正是jQuery为您处理的规范化。只需直接使用e.target：

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

Answer 2

为您的函数添加参数：

function(e){}

Answer 3

如果我理解你的正确跟随会帮助你

您在e和mouseenter功能中缺少参数mouseleave

＆＃13;

$(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");

＆＃13;

.invisible {
  visibility: hidden;
}

＆＃13;

<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>

＆＃13;

Answer 4

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

Answer 5

用你更换你拥有的东西：

<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>

要解释，你需要通过你的函数传递'e'作为参数，'e'是事件。以下链接可能对您个人阅读也有帮助：

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

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

Answer 6

您必须在函数中添加一个参数：

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

由于您的函数内没有e对象，因此无法正常工作。 e代表事件对象，请阅读以下内容：https://api.jquery.com/category/events/event-object/

jQuery e.target e未定义

6 个答案: