jquery報告什麼元素被徘徊在

我試圖建立一個小型檢查工具，只是簡單地報告元素懸停，其ID和它擁有的任何類。jquery報告什麼元素被徘徊在

我建立了具有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>

來源

2012-11-02 sygad1

這似乎只是這是可以做到輕鬆了不少：http://jsfiddle.net/kmJ5s/10/ – adeneo

你需要照顧以下的項目，

你真的應該實現這個onmousemove，因爲當你從父子元素內移動，並留下一個子元素，它不會爲父母更新爲你永遠不進入/離開父元素。
您應該使用e.target代替this
清除掉全局變量，因爲它可能會結轉到下一個元素。

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) 
});

來源

2012-11-02 21:08:06

+1這使得更多的感覺。 –

非常棒，謝謝你。爲什麼「mousemove」和「e.target」比「懸停」和「this」更有效？ – sygad1

嘗試使用$(e.currentTarget)代替$(this)

來源

2012-11-02 20:57:01

似乎對有相同的問題Webkit和Firefox。 http://jsfiddle.net/kmJ5s/9/ –

jquery報告什麼元素被徘徊在

回答

相關問題