Jquery .ClickOut事件

Question

大家好，

我的某个项目存在一些问题。我目前正在为Google Chrome开发工具栏。这个概念是我的扩展插入在我访问的每个页面中使用内容脚本和iframe插入。在我的Printscreen上用红色实现。

之后我创建了另一个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);

但它似乎没有注入页面。它本来应该有问题......

Answer 1

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

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

Answer 2

效果很好但是像这样：

$(document).click(function(){
    // hide drop down clicking anywhere on page:
    dropMenu('slideUp', 0);
});

$("#dM1").click( function(e) {
    e.stopPropagation(); // prevent click on drop menu from removing the drop down.
    dropMenu('dropMenu1', $(this).position().left);
});

现在我必须在全局页面上插入类似的代码，有人知道如何动态插入js代码吗？