javascript - 在 Firefox 调试工具中选择容器

Question

我正在尝试创建类似于 Firefox 调试工具 ( ctrlshift+ C) 的容器选择器。总体思路是返回选定（单击）元素的列表以供进一步处理。

这是我现在拥有的：

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

在最简单的情况下工作，但普遍的问题是事件冒泡，选择界面不是很友好。

它是如何在 Firefox 中完成的？也许它需要更好的造型？工具提示呢？

Answer 1

它没有冒泡。问题是当你mouseenter是一个锚时，你也在mouseenter路上（有时）你也有 ul 和 li。您可以尝试在编辑元素时取消选中所有父母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/

编辑：
我稍微改变了上面的小提琴。即使通过单击突出显示它们，它也会从父元素中删除轮廓。