单击外部事件在 iframe 上不起作用

Question

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

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

当我点击一个用于调用颜色面板的图标时，面板将 show.And 我希望当我在面板外单击时，它将是 hide.so 我的代码是：

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.when 我单击 ifame，没有任何反应，面板仍然显示，

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

Answer 1

您可以通过监听网页正文元素上的点击（因此，点击任何元素）来监听外部点击，然后您可以通过创建另一个事件来将您的 .color_panel 排除在该事件之外"when I get clicked on, ignore any other clicks"。效果将完全是你想要的，你可以听到外部点击：

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

单击外部事件在 iframe 上不起作用

Clickoutside event doen't work on iframe

javascript

jquery

dom

web-frontend