像在Firefox調試工具

Question

選擇容器我試圖創建容器選擇喜歡的，如果Firefox的調試工具（CTRL轉變 + Ç）。總體思路是返回所選（單擊）元素的列表以供進一步處理。

這是我現在有：

http://jsfiddle.net/jEHBU/

$('ul,li,a').on('mouseenter', function (e) { 
    e.stopPropagation(); 
    $(this).css({ 
     outline: "1px solid red" 
    }); 
}).on('mouseleave', function (e) { 
    e.stopPropagation(); 
    if (!$(this).hasClass('box-selected')) { 
     $(this).css({ 
      outline: 0 
     }); 
    } 
}).on('click', function (e) { 
    e.stopPropagation(); 
    if ($(this).hasClass('box-selected')) { 
     $(this.removeClass('box-selected')) 
      .css({ 
      outline: 0 
     }); 
     e.preventDefault(); 
    } else { 
     $(this).addClass('box-selected'). 
     css({ 
      outline: '1px solid green' 
     }); 
     e.preventDefault() 
    } 
}); 

作品在simplests情況，但普遍的問題是事件冒泡， 和選擇界面不是很友好。

它是如何在Firefox中完成的？也許它需要更好的造型？怎麼樣的工具提示？

Answer 1

這不是冒泡。問題是，當你在mouseenter一個主播你也mouseenter UL和李的方式（有時）。 您可以嘗試取消選中所有父母當一個元素是mouseenter版

$('ul,li,a').on('mouseenter', function (e) { 
    e.stopPropagation(); 
    $(this).css({ 
     outline: "1px solid red" 
    }); 
    $(this).parents().each(function() { 
     $(this).css({ 
      outline: 0 
     }); 
    }); 
}); 

爲了使代碼更乾淨，你可以指定一個類，而不是添加/刪除每次outline財產。

這裏的更新小提琴：http://jsfiddle.net/jEHBU/8/

編輯：
我稍微改變上面的小提琴。即使通過點擊突出顯示，它也會從父元素中刪除輪廓。