jquery报告正在徘徊的元素

时间:2012-11-02 20:53:52

标签: jquery hover nodename

我正在尝试构建一个迷你检查器工具,它只是报告悬停的元素,它的ID以及它拥有的任何类。

我构建了一个包含4个嵌套元素的演示页面:
html>身体> outerContainer> innerContainer

我设法让它以时尚的方式工作,它从外部元素到内部元素时正确地报告信息,但是当反向时,报告的元素是前一个元素。

要查看它的实际效果 - http://jsfiddle.net/sygad/kmJ5s/

                                                              

<head>

    <meta charset="utf-8">

    <title>Element Hover</title>

    <style>

        html                {margin:0; padding:40px 20px 0; background:#333; font:0.9em/1.1em "Arial", sans-serif}
        body                {margin:0; padding:0 0 10px; background:#555}

        #outerContainer     {margin:20px; padding:0; background:#777; width:240px; height:260px;}
        #innerContainer     {margin:20px; padding:0; background:#999; width:200px; height:200px;}

        p#info              {position:absolute; top:0; left:0}
        p                   {margin:0; padding:0; color:white}

    </style>

</head>

<body>

    <p id="info">Current element: <span></span></p>

    <p>Body</p>

    <div id="outerContainer">
        <p>Outer</p>

        <div id="innerContainer">
            <p>Inner</p>
        </div>

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <script>

        //Initialise
        var nodeName = '';
        var ids = '';
        var classes = '';

        $('*').hover(function(e)
        {
            //Clear
            nodeName = '';
            ids = '';
            classes = '';

            nodeName = $(this).context.nodeName.toLowerCase();

            if ($(this).attr('id') != undefined)
            {
                ids = ' #' + $(this).attr('id');
            }

            if ($(this).attr('class') != undefined)
            {
                classes = ' .' + $(this).attr('class');
            }

            $('p#info span').text(nodeName+ids+classes)
        })
    </script>

</body>

2 个答案:

答案 0 :(得分:3)

尝试使用$(e.currentTarget)代替$(this)

答案 1 :(得分:2)

你需要照顾以下项目,

  1. 您应该真正实现此onmousemove,因为当您从父项移动子元素并保留子元素时,它将不会更新父项,因为您永远不会进入/离开父元素。
  2. 您应该使用e.target代替this
  3. 清除全局变量,因为它可能会延续到下一个元素。
  4. DEMO: http://jsfiddle.net/kmJ5s/8/

    var nodeName = '';
    var ids = '';
    var classes = '';
    
    $('*').mousemove(function(e) {
        nodeName = '';
        ids = '';
        classes = '';
        var _this = e.target;
        nodeName = _this.nodeName.toLowerCase();
    
        if (_this.id) {
            ids = ' #' + _this.id;
        }
    
        if (_this.className) {
            classes = ' .' + _this.className;
        }
    
        $('p#info span').text(nodeName + ids + classes)
    });