1

ホバーされている要素、そのID、およびそれが持つクラスを単に報告するミニインスペクターツールを構築しようとしています。

html > body > outerContainer > innerContainer の4 つのネストされた要素を持つデモ ページを 作成しました。

私はそれをうまく機能させることができました。外側の要素から内側の要素に移動すると情報が正しく報告されますが、逆に移動すると、報告された要素は前のものになります。

実際の動作を確認するには - 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>

4

2 に答える 2

3

$(e.currentTarget)の代わりに使用してみてください$(this)

于 2012-11-02T20:57:01.190 に答える
2

以下の項目の世話をする必要があります。

  1. onmousemove親から子要素内に移動して子要素を離れると、親要素に出入りすることがないため、親に対して更新されないため、これを実際に実装する必要があります。
  2. e.target代わりに使用する必要がありますthis
  3. 次の要素に引き継がれる可能性があるため、グローバル変数をクリアします。

デモ: 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)
});
于 2012-11-02T21:08:06.343 に答える