Question

我正在尝试创建容器选择器，如果Firefox的调试工具（ ctrl shift + C ）。一般的想法是返回所选（点击）元素的列表以供进一步处理。

这就是我现在所拥有的：

$('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/

修改：
我略微改变了上面的小提琴。它正在从父元素中删除轮廓，即使它们是通过单击突出显示的。

选择Firefox调试工具中的容器

1 个答案: