javascript - 函数调用者无效元素

Question

如果我有:

<div id="mydiv" onmouseover="myfunc()">
  <div id="mydiv1"></div>
  <div id="mydiv2"></div>
</div>

<script>
  function myfunc() {
    var evt = window.event || arguments.callee.caller.arguments[0];
    var em = evt.target || evt.srcElement;
    return em.id;
  }
</script>

该函数由 mydiv onmouseover 调用，但如果鼠标光标位于 mydiv1 上，函数将返回 mydiv1。

如何让它始终显示mydiv？

P.S:我知道我可以使用 myfunc(this) 之类的东西，但我想从我的函数内部找到调用者。

Answer 1

我个人更喜欢使用 jQuery 来连接事件:

$('#mydiv').on('mouseover',function(){
    var id = $(this).attr('id');
    // ...
});

如果这应该应用于多个元素，则使用类选择器:

$('.hoverable').on('mouseover',function(){
    var id = $(this).attr('id');
    // ...
});

要同时处理 future 的内容，请将事件处理程序附加到共同祖先，并选择第二个参数中的可悬停元素on:

$('body').on('mouseover','.hoverable',function(){
    var id = $(this).attr('id');
    // ...
});

See it in action with future content here.