Clickoutside 事件在 iframe 上不起作用

Question

这是一个富文本编辑器，有一个 div 显示用户输入的内容，就像这样：

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

当我点击一个用来调用颜色面板的图标时，面板会显示出来。我希望当我点击面板外时，它会被隐藏。所以我的代码是：

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();
})

当我点击外部面板时它会消失，除非我点击 iframe。当我点击 ifame 时，没有任何反应，面板仍然显示，

求助……我想知道原因。请问……ifame不是面板外的dom元素吗？

Answer 1

您可以通过侦听网页正文元素上的点击来侦听外部点击（因此，点击任何元素），然后您可以通过制作另一个事件“当我得到点击，忽略任何其他点击”。效果正是您想要的，您可以监听外部点击：

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;
});