jquery：绘制和擦除焦点上的边框，并在div的任何子元素上模糊

Question

I'm having a div which can have many (not less then 5) child elements (mostly they are div , table and img ). I want to draw border (eg with jquery.css method) when a user clicked on any child element of that div. It can be easily done with something like

$div.click(function() {
    //drawing frame here
});

Removing frame on click outside is much more harder. Of cause I can handle deselecting on click event thrown by any other div or body. But... maybe there's more elegant solution?

Thank you in advance!

Answer 1

Try to use .on('focusin') and .on('focusout') events to handle that.

More info: focusin , focusout and .on() ;

Answer 2

Try using function on the surrounding div

Example: HTML:

<div id="test">
    <div><p>Hallo</p></<div>
        <img src="not found" alt="not found">
    </div>

JS:

$('#test').on('click', '*', function(){

    $(this).css('border', '1px solid red');
return false;
});

Fiddler: http://fiddle.jshell.net/