Jquery .ClickOut Event

Question

Привет всем,

У меня возникли проблемы с одним из моих проектов.В настоящее время я разрабатываю панель инструментов для Google Chrome.Идея заключается в том, что мое расширение вставляется с помощью скрипта контента в каждую страницу, которую я посещаю.На моем Принтскрине появилось красное.

После этого я создал еще один 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

Отлично работает, но вот так:

$(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?

Answer 2

Разве вы не можете просто добавить событие клика в документ?Затем в реальном раскрывающемся меню (или любых других событиях, в которых вы не хотите скрывать раскрывающийся список) предотвратите всплывание любых кликов:

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