0

I have implemented the following piece that works almost everywhere on the page.

$(document).click(function(event){
    if($("#div_to_close").is(":visible")){
       $("#div_to_close").hide();   
    }
});

$("#div_to_close").click(function(event){
   event.stopPropagation();
});

This is working fine anywhere on the page but there are certain elements on the page where click handlers are implemented and event.stopPropagation() is used in the hadler. In all such elements the div does not close.

This happens because the click event for these elements do not bubble upto the document and hence the handler for doc is not called.

How do I come across this?

Demo

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
mickeymoon
  • 4,820
  • 5
  • 31
  • 56
  • An other way, making DIV focusable: http://stackoverflow.com/a/17966127/1414562 – A. Wolff May 23 '14 at 09:21
  • Have you tried not calling event.stopPropagation() in these handlers? – fast May 23 '14 at 09:23
  • Don't use `event.stopPropagation();` it will completely ignores the possibility that any other code on the page might need to know about that event. [detailed article](http://css-tricks.com/dangers-stopping-event-propagation/) – Krish May 23 '14 at 09:31
  • @A.Wolff I was trying like this but could not succeed. http://jsfiddle.net/2bfJC/1/ any problem there? – Bhojendra Rauniyar May 23 '14 at 09:34
  • @C-link It should be like this, taking into accound child element clicked: http://jsfiddle.net/2bfJC/2/ – A. Wolff May 23 '14 at 09:37
  • @C-link `taking into accound child element clicked` otherwise clicking on any child element would still close the DIV (not expected result) http://jsfiddle.net/2bfJC/3/ – A. Wolff May 23 '14 at 09:53

0 Answers0