Clickoutside Ereignis doen't Arbeit auf iframe

Question

Es ist ein Rich-Text-Editor gibt es einen div zeigt der Content-Benutzer in getippt, so wie diese:

<div class=‘content’> 
    <iframe data-role=text-editable.></iframe> 
</div> 

Wenn ich ein Symbol klicken, die verwendet wird die anrufen Farb-Panel, das Panel wird show.And ich wünsche, wenn ich außerhalb des Panels klicken, wird es hide.so mein Code:

var color_panel = $('.color-panel'); 
    color_panel.on("clickoutside",  function (e) {     
    var t = $(e.target);    
    if ($.contains(color_panel[0], t[0]))     
     return; 
    color_panel.hide(); 
}) 

es funktioniert gut, wenn ich außerhalb des Panels klicken verschwindet außer ich das klicken iframe.wenn ich auf das ifame klicke, passiert nichts, das Panel wird immer noch angezeigt,

Hilfe ...... ich möchte den Grund wissen. Bitte ... ist das ifame nicht das dom-element außerhalb des Panels?

Answer 1

Sie können auf externe Klicks achten, indem Sie auf Klicks auf das body -Element der Webseite achten (also auf ein beliebiges Element klicken) und dann Ihr .color_panel von diesem Ereignis ausschließen, indem Sie ein anderes Ereignis mit der Meldung "Wenn ich geklickt werde andere Klicks ignorieren ". Der Effekt ist genau das, was Sie wollen, dass sie außerhalb Klicks hören können:

var panelOpen = false; 

$('body').click(function(event) { 
    if (panelOpen) { 
    panelOpen = false; 
    color_panel.hide(); 
    } 
}); 

$('.color_panel').click(function(event) { 
    panelOpen = true; 
    //callYourMethodToShowThePanelHere(); 
    e.preventDefault(); // these methods will stop the body click event 
    e.stopPropagation(); 
    return false; 
});