V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
kmvan
V2EX  ›  问与答

[JS 问题]多级菜单,如何获取当前悬停元素的位置?

  •  
  •   kmvan · 2014-03-01 17:07:26 +08:00 · 3695 次点击
    这是一个创建于 3701 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://jsfiddle.net/5a2wq/1/

    好像是冒泡的原因,二级菜单当前li元素的 offset().left 总是无法正确获取,哪位大侠指点一下?
    9 条回复    1970-01-01 08:00:00 +08:00
    jakwings
        1
    jakwings  
       2014-03-01 17:57:41 +08:00   ❤️ 1
    判断 offset 时用 e.target 。
    emric
        2
    emric  
       2014-03-01 17:59:18 +08:00   ❤️ 1
    把` mouseover` 和 `mouseout` 替换成 ` mouseenter` 和 `mouseleave`.
    感觉这是一个 XY 问题.
    jsonline
        3
    jsonline  
       2014-03-01 20:24:32 +08:00 via Android
    @emric 为了解决X,问了一个Y问题?
    kmvan
        4
    kmvan  
    OP
       2014-03-01 22:38:01 +08:00
    @emric 呃,请问啥是XY问题?
    muzuiget
        5
    muzuiget  
       2014-03-01 22:59:14 +08:00   ❤️ 1
    kmvan
        6
    kmvan  
    OP
       2014-03-01 23:37:13 +08:00
    @muzuiget 原来如此。3Q
    emric
        7
    emric  
       2014-03-01 23:53:54 +08:00
    @jsonline @kmvan
    对的, mouseover + offset 一般会用的比较少.
    猜想在完成这类需求的时候应该还有更好的解决方法.
    xiaofu
        8
    xiaofu  
       2014-03-02 00:57:37 +08:00   ❤️ 1
    console.log(jQuery(this).offset());
    当鼠标悬停在二级菜单的时候可以看到
    Object {top: 74, left: 88}
    Object {top: 46, left: 48}
    是因为 mouseover 被触发了两次
    Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter.
    原文 : http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover
    jQuery('#log').text(); 的值也就被覆盖了,不知道是不是这个原因.
    @emric
    @kmvan
    jsonline
        9
    jsonline  
       2014-03-02 01:16:30 +08:00   ❤️ 1
    jQuery('#log').text('当前的li offset left 位置可能是:'+ jQuery(e.target).offset().left);
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5347 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 08:55 · PVG 16:55 · LAX 01:55 · JFK 04:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.