Jquery .ClickOut 事件

Posted 2023-05-09

【中文标题】Jquery .ClickOut 事件

【英文标题】：Jquery .ClickOut Event

【发布时间】：2011-07-08 18:55:24

【问题描述】：

大家好，

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

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

但它似乎没有注入页面。应该是哪里出了问题……

【参考方案1】：

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

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

【参考方案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 代码？