javascript - jQuery .ClickOut事件

大家好，

我的一个项目有问题。我目前正在开发Google Chrome浏览器的工具栏。这个概念是我的扩展程序通过在我访问的每个页面中使用一个iframe的内容脚本来插入。在我的打印屏幕上以红色实现。

之后，我创建了另一个iframe，当我单击“菜单”按钮时出现。该iframe看起来像一个dropMenu。在打印屏幕中以橙色显示。

好吧，现在让我解释一下我的问题：

当我单击“ dropMenuButton”时，我将执行以下代码：

$( "#dM1").click( function() {
    dropMenu('dropMenu1', $(this).position().left);
});

为了清楚起见，函数“ dropMenu”将调用我的后台页面（通过消息交换）以显示或隐藏dropMenu，无论该函数是否已被激活。

这是“ dropMenu函数”执行的代码

if(document.getElementById("dropMenu"))
    {
        $("#dropMenu").slideUp(800, function() {
            $(this).remove();
        });
    }
    else
    {
        var body = $('body'),
        MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
        iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');

        body.append(iframe);

        $("#dropMenu").hide().slideDown(800);

        // Shift the menu (Left)
        $("#dropMenu").css({left: marginLeft+'px'});
    }

因此，dropMenuButton上的事件可以正常工作，但我想提供一些诸如.ClickOut事件的改进措施。我想要的是，当有人在dropMenu（橙色）之外单击时，菜单将被隐藏。

我已经尝试了很多东西，但是没有任何效果...

希望有人能帮助我！
提前致谢。

编辑（注入）：

我试图注入这样的javascript：

var injectJs = $('<script type=text/javascript>' +
            '$(document).click(function() {' +
                'dropMenu("dropMenu1", 0);' +
        '});');

body.append(injectJs);

injectJs = $('$("#dropMenu").click( function(e) {' +
        'e.stopPropagation();' +
    '});' +
    '</script>');
body.append(injectJs);

但是它似乎没有注入到页面中。它应该在某个地方有问题...

最佳答案

您不能只在文档上添加点击事件吗？然后在实际的下拉菜单（或您不想隐藏下拉菜单的任何其他事件）上，防止任何点击冒泡：

$(document).click(function(){
  // hide drop down clicking anywhere on page:
  $("#dropMenu").slideUp(800, function() {
    $(this).remove();
  });
});

$("#dropMenu").click( function(e) {
  e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});