I'm currently working on developing a container selector similar to the one found in Firefox's debug tools (press ctrlshift+C). The main goal is to retrieve a list of selected elements for further manipulation.
Here is my current progress:
$('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()
}
});
This approach works well in simple cases, however, there are issues with event bubbling and the user interface for selection can be improved.
How does Firefox handle this functionality? Perhaps better styling or tooltips could enhance the user experience?