Как я могу обнаружить щелчок за пределами элемента?

Question

У меня есть несколько HTML-меню, которые отображаются полностью, когда пользователь нажимает на заголовок этих меню. Я хотел бы скрыть эти элементы, когда пользователь щелкает за пределами области меню.

Возможно ли что-то подобное с jQuery?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

Answer 1

Самый широкий способ сделать это - выбрать все на веб-странице, кроме элемента, где вы не хотите, чтобы клики обнаруживались, и связать событие клика с тем, когда открывается меню.

Затем, когда меню закрыто, удалите привязку.

Используйте .stopPropagation, чтобы предотвратить влияние события на любую часть меню-контейнера.

$("*").not($("#menuscontainer")).bind("click.OutsideMenus", function ()
{
    // hide the menus

    //then remove all of the handlers
    $("*").unbind(".OutsideMenus");
});

$("#menuscontainer").bind("click.OutsideMenus", function (event) 
{
    event.stopPropagation(); 
});

Answer 2

Это может быть лучшим решением для некоторых людей.

$(".menu_link").click(function(){
    // show menu code
});

$(".menu_link").mouseleave(function(){
    //hide menu code, you may add a timer for 3 seconds before code to be run
});

Я знаю, что mouseleave означает не только щелчок снаружи, но и выход из области этого элемента.

Как только само меню находится внутри элемента menu_link, само меню не должно быть проблемой для щелчка или перемещения.

Answer 3

$('#propertyType').on("click",function(e){
          self.propertyTypeDialog = !self.propertyTypeDialog;
          b = true;
          e.stopPropagation();
          console.log("input clicked");
      });

      $(document).on('click','body:not(#propertyType)',function (e) {
          e.stopPropagation();
          if(b == true)  {
              if ($(e.target).closest("#configuration").length == 0) {
                  b = false;
                  self.propertyTypeDialog = false;
                  console.log("outside clicked");
              }
          }
        // console.log($(e.target).closest("#configuration").length);
      });

Answer 4

jQuery().ready(function(){
    $('#nav').click(function (event) {
        $(this).addClass('activ');
        event.stopPropagation();
    });

    $('html').click(function () {
        if( $('#nav').hasClass('activ') ){
            $('#nav').removeClass('activ');
        }
    });
});

Answer 5

Если честно, мне не понравилось ни одно из предыдущих решений.

Лучший способ сделать это - привязать событие click к документу и сравнить, действительно ли этот щелчок находится за пределами элемента (как сказал Арт в своем предложении).

Однако у вас возникнут некоторые проблемы: вы никогда не сможете отсоединить его, и у вас не может быть внешней кнопки для открытия / закрытия этого элемента.

Вот почему я написал этот небольшой плагин (нажмите здесь, чтобы перейти по ссылке) , чтобы упростить эти задачи. Может ли быть проще?

<a id='theButton' href="#">Toggle the menu</a><br/>
<div id='theMenu'>
    I should be toggled when the above menu is clicked,
    and hidden when user clicks outside.
</div>

<script>
$('#theButton').click(function(){
    $('#theMenu').slideDown();
});
$("#theMenu").dClickOutside({ ignoreList: $("#theButton") }, function(clickedObj){
    $(this).slideUp();
});
</script>

Answer 6

Простой плагин:

$.fn.clickOff = function(callback, selfDestroy) {
    var clicked = false;
    var parent = this;
    var destroy = selfDestroy || true;

    parent.click(function() {
        clicked = true;
    });

    $(document).click(function(event) {
        if (!clicked && parent.is(':visible')) {
            if(callback) callback.call(parent, event)
        }
        if (destroy) {
            //parent.clickOff = function() {};
            //parent.off("click");
            //$(document).off("click");
            parent.off("clickOff");
        }
        clicked = false;
    });
};

Использование:

$("#myDiv").clickOff(function() {
   alert('clickOff');
});

Answer 7

Чтобы скрыть fileTreeClass, если щелкнуть вне его

 jQuery(document).mouseup(function (e) {
            var container = $(".fileTreeClass");
            if (!container.is(e.target) // if the target of the click isn't the container...
                && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                container.hide();
            }
        });

Answer 8

В качестве оболочки к этому замечательному ответу от Art и для использования синтаксиса, первоначально запрошенного OP, вот расширение jQuery, которое может записывать, происходит ли щелчок за пределами элемента set.

$.fn.clickOutsideThisElement = function (callback) {
    return this.each(function () {
        var self = this;
        $(document).click(function (e) {
            if (!$(e.target).closest(self).length) {
                callback.call(self, e)
            }
        })
    });
};

Тогда вы можете позвонить так:

$("#menuscontainer").clickOutsideThisElement(function() {
    // handle menu toggle
});

Вот демо в скрипке

Answer 9

 <div class="feedbackCont" onblur="hidefeedback();">
        <div class="feedbackb" onclick="showfeedback();" ></div>
        <div class="feedbackhide" tabindex="1"> </div>
 </div>

function hidefeedback(){
    $j(".feedbackhide").hide();
}

function showfeedback(){
    $j(".feedbackhide").show();
    $j(".feedbackCont").attr("tabindex",1).focus();
}

Это самое простое решение, которое я придумал.

Answer 10

Использование not ():

$("#id").not().click(function() {
    alert('Clicked other that #id');
});