Soru Bir öğenin dışındaki bir tıklamayı nasıl algılayabilirim?


Kullanıcıların bu menülerin başına tıkladığında tamamen gösterdiğim bazı HTML menüleri var. Kullanıcı menü alanlarının dışına çıktığında bu öğeleri gizlemek istiyorum.

JQuery ile bu gibi bir şey mümkün mü?

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

2027


Menşei


İşte bu stratejinin bir örneği: jsfiddle.net/tedp/aL7Xe/1 - Ted
Tom'un bahsettiği gibi okumak istersiniz css-tricks.com/dangers-stopping-event-propagation Bu yaklaşımı kullanmadan önce. Bu jsfiddle aracı oldukça güzel. - Jon Coombs
öğeye bir referans alın ve sonra event.target ve son olarak == == her ikisi de daha sonra kodu yürütün - Rohit Kumar
Kullanmanı öneririm github.com/gsantiago/jquery-clickout :) - Rômulo M. Farias
Kullanmaya çalışmak event.path. http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element/43405204#43405204 - Dan Philip


Cevaplar:


NOT: Kullanımı stopEventPropagation() DOM'de normal olay akışını kırdığı için kaçınılması gereken bir şeydir. Görmek Bu makale daha fazla bilgi için. Kullanmayı düşünün Bu method yerine.

Pencereyi kapatan belge gövdesine bir tıklama olayı ekleyin. Belge gövdesine yayılmasını durduran kabına ayrı bir tıklama olayı ekleyin.

$(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

1620



Bu, #menucontainer içinde bulunan düğmeler ve bağlantılar dahil olmak üzere birçok şeyin standart davranışını kırar. Bu cevabın çok popüler olduğuna şaşıyorum. - Art
Bu, #menucontainer içindeki herhangi bir şeyin davranışını bozmaz, çünkü içindeki herhangi bir şey için yayılma zincirinin altındadır. - Eran Galperin
onun çok güzel ama kullanmalısın $('html').click() vücüt değil. Gövde her zaman içeriğinin yüksekliğine sahiptir. Çok fazla içerik yok ya da ekran çok yüksek, sadece vücudun doldurduğu kısımda çalışıyor. - meo
Bu çözümün o kadar çok oy aldığına da şaşırdım. Bu, dışındaki herhangi bir öğenin stopPropagation özelliği için başarısız olur jsfiddle.net/Flandre/vaNFw/3 - Andre
Philip Walton bu cevabın neden en iyi çözüm olmadığının çok iyi olduğunu açıklıyor: css-tricks.com/dangers-stopping-event-propagation - Tom


Sen dinleyebilirsin tık olay açık document ve emin olun #menucontainer bir ataş veya tıklanan öğenin hedefini kullanarak değil .closest().

Değilse, tıklanan öğe #menucontainer ve güvenle saklayabilirsiniz.

$(document).click(function(event) { 
    if(!$(event.target).closest('#menucontainer').length) {
        if($('#menucontainer').is(":visible")) {
            $('#menucontainer').hide();
        }
    }        
});

Düzenle - 2017-06-23

Menüden çıkmayı planlıyorsanız ve etkinliklerin dinlemesini durdurmak istiyorsanız etkinlik dinleyicisinden sonra da temizleyebilirsiniz. Bu işlev, sadece yeni oluşturulan dinleyiciyi temizler, diğer herhangi bir tıklama dinleyicisini korur. document. ES2015 sözdizimi ile:

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    if (!$(event.target).closest(selector).length) {
      if ($(selector).is(':visible')) {
        $(selector).hide()
        removeClickListener()
      }
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

Düzenle - 2018-03-11

JQuery kullanmak istemeyenler için. İşte sade vanillaJS'deki (ECMAScript6) yukarıdaki kod.

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target)) { // or use: event.target.closest(selector) === null
            if (isVisible(element)) {
                element.style.display = 'none'
                removeClickListener()
            }
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener)
    }

    document.addEventListener('click', outsideClickListener)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 

NOT: Bu sadece yorum kullanmak için Alex yorum dayanmaktadır !element.contains(event.target) jQuery parçası yerine.

Fakat element.closest() şimdi tüm büyük tarayıcılarda da mevcuttur (W3C sürümü jQuery birinden biraz farklıdır). Polyfills burada bulunabilir: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest


1127



Diğer cevapların çoğunu denedim, ama sadece bu işe yaradı. Teşekkürler. Kullandığım kod şuydu: $ (document) .click (function (event) {if ($ (event.target) .closest ('. Window'). Length == 0) {$ ('. Window' ) .fadeOut ('hızlı');}}); - Pistos
Aslında bu çözümle devam ettim çünkü aynı sayfada birden fazla menüyü daha iyi destekliyor, ilk açıkken ikinci menüye tıklandığında stopPropagation çözümünde ilk açık bırakılacak. - umassthrower
Bu, sayfada birden çok öğe için çok iyi bir çözümdür. - jsgroove
Mükemmel cevap. Kapatmak istediğiniz birden fazla öğeye sahip olduğunuzda bu yoldur. - John
JQuery olmadan - !element.contains(event.target) kullanma Node.contains () - Alex Ross


Bir öğenin dışındaki bir tıklama nasıl algılanır?

Bu sorunun bu kadar popüler olmasının ve çok fazla cevabının olmasının nedeni aldatıcı bir şekilde karmaşık olmasıdır. Yaklaşık sekiz yıl ve düzinelerce cevaptan sonra, erişilebilirliğe ne kadar az özen verildiğini görmek beni gerçekten şaşırttı.

Kullanıcı menü alanlarının dışına çıktığında bu öğeleri gizlemek istiyorum.

Bu asil bir nedendir ve gerçek konu. Sorunun başlığı - çoğu yanıtın adreslemeye çalıştığı şey - talihsiz bir kırmızı ringa içermektedir.

İpucu: bu kelime "Tıklama"!

Tıklama işleyicilerini gerçekten bağlamak istemezsiniz.

İletişim kutusunu kapatmak için tıklama işleyicileri bağlanıyorsanız, zaten başarısız oldunuz. Başarısız olmanızın nedeni, herkesin tetiklememesi. click olaylar. Fareyi kullanamayan kullanıcılar, diyaloğundan (ve açılan menünüzün tartışmasız bir tür iletişim penceresi) çıkıntıve daha sonra, iletişimin ardındaki içeriği daha sonra tetiklemeden okuyamazlar. click Etkinlik.

Öyleyse soruyu yeniden yazalım.

Bir kullanıcı onunla bittiğinde bir diyaloğu nasıl kapatır?

Amaç budur. Maalesef şimdi userisfinishedwiththedialog olay ve bu bağlayıcılık çok kolay değil.

Bir kullanıcının bir iletişim kutusunu kullanmayı bitirdiğini nasıl anlayabiliriz?

focusout Etkinlik

Odaklamanın diyalogdan çıkıp çıkmadığını belirlemek iyi bir başlangıçtır.

İpucu: Dikkatli olun blur Etkinlik, blur olay kabarcıklanma evresine bağlıysa yayılmaz!

jQuery en focusout sadece iyi yapacak. JQuery kullanamıyorsanız, o zaman kullanabilirsiniz blur yakalama aşamasında:

element.addEventListener('blur', ..., true);
//                       use capture: ^^^^

Ayrıca, birçok iletişim kutusu için konteynerin odağı almasına izin vermeniz gerekir. Eklemek tabindex="-1" iletişim kutusunun sekme akışını kesintiye uğratmadan dinamik olarak odak almasını sağlamak.

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on('focusout', function () {
  $(this).removeClass('active');
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>


Bu demoda bir dakikadan uzun bir süre oynarsanız, sorunları hızla görmeye başlayabilirsiniz.

Birincisi, diyalogdaki bağlantının tıklanabilir olmamasıdır. Tıklama veya sekme tıklamaya çalışmak, etkileşim gerçekleşmeden önce iletişim kutusunun kapanmasına yol açacaktır. Bunun nedeni, iç elemanın odaklanmasının tetiklenmesidir. focusout tetiklemeden önce etkinlik focusin olay tekrar.

Düzeltme, olay döngüsündeki durum değişikliğini sıraya koymaktır. Bu kullanılarak yapılabilir setImmediate(...)veya setTimeout(..., 0) desteklemeyen tarayıcılar için setImmediate. Bir kez kuyruğa alındıktan sonra bir sonraki tarafından iptal edilebilir focusin:

$('.submenu').on({
  focusout: function (e) {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function (e) {
    clearTimeout($(this).data('submenuTimer'));
  }
});

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

İkinci konu, linke tekrar basıldığında diyaloğun kapanmayacağıdır. Bunun nedeni, iletişim kutusunun odağı kaybetmesi, yakın davranışı tetiklemesidir, bundan sonra bağlantı tıklatması iletişim kutusunun yeniden açılmasını tetikler.

Önceki sayıya benzer şekilde, odak durumunun yönetilmesi gerekiyor. Durum değişikliğinin çoktan kuyruğa alındığı düşünüldüğünde, yalnızca iletişim tetikleyicilerinde odak etkinliklerinin ele alınması sorunudur:

Bu tanıdık geliyor olmalı
$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>


ESC anahtar

Odak durumlarını ele alarak yaptığınızı düşünüyorsanız, kullanıcı deneyimini basitleştirmek için yapabileceğiniz daha çok şey vardır.

Bu genellikle "sahip olmak güzel" bir özelliktir, ancak bu tür bir modal veya bir pop-up olduğunda ESC Anahtar kapatacak.

keydown: function (e) {
  if (e.which === 27) {
    $(this).removeClass('active');
    e.preventDefault();
  }
}

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('active');
      e.preventDefault();
    }
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>


İletişim kutusundaki odaklanabilir öğeleriniz olduğunu biliyorsanız, iletişim kutusuna doğrudan odaklanmanız gerekmeyecektir. Bir menü oluşturuyorsanız, bunun yerine ilk menü öğesini odaklayabilirsiniz.

click: function (e) {
  $(this.hash)
    .toggleClass('submenu--active')
    .find('a:first')
    .focus();
  e.preventDefault();
}

$('.menu__link').on({
  click: function (e) {
    $(this.hash)
      .toggleClass('submenu--active')
      .find('a:first')
      .focus();
    e.preventDefault();
  },
  focusout: function () {
    $(this.hash).data('submenuTimer', setTimeout(function () {
      $(this.hash).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('submenuTimer'));  
  }
});

$('.submenu').on({
  focusout: function () {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('submenuTimer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('submenu--active');
      e.preventDefault();
    }
  }
});
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu:after {
  clear: both;
  content: '';
  display: table;
}
.menu__item {
  float: left;
  position: relative;
}

.menu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
  background-color: black;
  color: lightblue;
}

.submenu {
  border: 1px solid black;
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
}
.submenu--active {
  display: block;
}

.submenu__item {
  width: 150px;
}

.submenu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}

.submenu__link:hover,
.submenu__link:focus {
  background-color: black;
  color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#menu-1">Menu 1</a>
    <ul class="submenu" id="menu-1" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
  <li class="menu__item">
    <a  class="menu__link" href="#menu-2">Menu 2</a>
    <ul class="submenu" id="menu-2" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet.


WAI-ARIA Roller ve Diğer Erişilebilirlik Desteği

Bu cevap, bu özellik için erişilebilir klavye ve fare desteğinin temellerini içerir, ancak zaten oldukça büyük olduğu için herhangi bir tartışmadan kaçınacağım WAI-ARIA rolleri ve öznitelikleri, Ancak, ben büyük ölçüde Uygulayıcıların, hangi rolleri kullanmaları gerektiği ve diğer uygun niteliklerle ilgili ayrıntılar için teknik özelliklere başvurmaları önerilir.


188



Bu, akılda açıklamalar ve erişilebilirlik ile en eksiksiz cevaptır. Diğer cevapların çoğunun yalnızca tıklama işlemiyle başa çıktığı ve herhangi bir açıklama yapılmadan kod snippet'inin düştüğü için bunun kabul edilen cevap olması gerektiğini düşünüyorum. - Cyrille
Şaşırtıcı, iyi açıkladı. Bu yaklaşımı bir React Bileşeninde kullandım ve mükemmel bir şekilde çalıştım - David Lavieri
@zzzzBov derin cevap için teşekkürler, ben vanilya JS elde etmek için çalışıyorum ve ben tüm jquery şeyler ile biraz kayboldum. vanilla js'de benzer bir şey var mı? - HendrikEng
@zzzzBov hayır ben jQuery-free sürümü tabii ki yazmak için arıyorum, bunu yapmaya çalışacağım ve sanırım gerçekten sıkışmış olsaydı ben burada yeni bir soru sormak en iyisidir. Tekrar çok teşekkürler. - HendrikEng
Bu, özel açılır menülerin veya diğer girişlerin tıklanmasının algılanması için harika bir yöntem olmakla birlikte, iki nedenden ötürü modalar veya pop-up'lar için tercih edilen yöntem olmamalıdır. Kullanıcı, başka bir sekmeye veya pencereye geçtiğinde veya bir f menüsü menü öğesi açıldığında kapanır, bu da gerçekten f * can sıkıcıdır. Buna ek olarak, "tıklama" etkinliği, fareyi yukarı doğru hareket ettirirken, "odaklanma" etkinliği, fareyi aşağı basılı tuttuğunuz anı tetikler. Normalde, bir tuşa sadece fare düğmesine basar ve sonra bırakılırsa bir eylem gerçekleştirir. Modeller için bunu yapmanın uygun ve erişilebilir bir yolu, tabbable bir kapatma düğmesi eklemektir. - Kevin


Buradaki diğer çözümler benim için işe yaramadı, dolayısıyla kullanmak zorundaydım:

if(!$(event.target).is('#foo'))
{
    // hide menu
}

127



Başka bir JQuery UI widget'ını, kendi pop-over kutunuza yerleştirirken harici tıklama html işleyicilerini tetiklemekten kaçınmak için event.target'in nasıl kullanılacağına dair pratik bir örnek gönderdim: Orijinal Hedefi almanın en iyi yolu - Joey T
Bu benim için çalıştı, hariç ekledim && !$(event.target).parents("#foo").is("#foo") içinde IF ifadesiyle, herhangi bir alt öğe tıklandığında menüyü kapatmaz. - honyovk
@Frug Cevabınız değerli olabilir, bu yüzden 5 tane aldınız, ama cevabınız karıştı. ve MBJ kimdir. Cevabınıza göre daha iyi bir çözüm üretmeye çalışıyordum. - Satya Prakash
MBJ muhtemelen benimkinin hemen üstünde yorum yazan kişinin eski adıydı. Kullanıcılar isimleri değiştirir, zorlaştırabilir ancak benimkine eklediğim yorumu ekledim .parents("#foo") - Frug
Derin yuvalama işlemek için özlü iyileştirme kullanmaktır .is('#foo, #foo *'), fakat Bu sorunu çözmek için bağlayıcı tıklama işleyicileri önermiyorum. - zzzzBov


Eran'ın örneğine benzer şekilde çalışan bir uygulama var, menü açtığımda tıklatma olayını gövdeye eklemem dışında ... Kinda şöyle:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});

Hakkında daha fazla bilgi jQuery en one() fonksiyon


118



ama sonra menünün kendisine tıklarsanız, o zaman dışarıda çalışmayacak :) - vsync
Tıklama dinleyicisini gövdeye bağlamadan önce event.stopProgagantion () uygulamasına yardımcı olur. - Jasper Kennis
Buradaki sorun, "bir" in, bir diziye birden çok kez olay ekleme jQuery yöntemine uygulanmasıdır. Bu nedenle, menüyü birden fazla kez açmak için tıklarsanız, etkinlik tekrar gövdeye bağlanır ve menüyü birden çok kez gizlemeye çalışır. Bu sorunu gidermek için bir güvenlik duvarı uygulanmalıdır. - marksyzm
Kullanarak bağlamadan sonra .one - içinde $('html') işleyici - yaz $('html').off('click'). - Cody
@Cody Bunun yardımcı olduğunu düşünmüyorum. one işleyici otomatik olarak arayacak off (jQuery belgelerinde gösterildiği gibi). - Mariano Desanze


$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

Benim için gayet iyi çalışıyor.


32



Kullandığım bu. Mükemmel olmayabilir, ancak bir hobi programcısı olarak, anlaşılması için yeterince basit. - kevtrout
bulanıklık dışında bir harekettir #menucontainer soru bir tıklama hakkındaydı - borrel
@borrel bulanıklığı değil kabın dışında bir hareket. Bulanıklık, odaklamanın tam tersidir, mouseout'u düşünürsünüz. Bu çözüm, özellikle düz metin ile tıklamalardaki girdi alanları arasında gidip geldiğim metni "düzenlemek için" oluştururken, özellikle benim için iyi çalıştı. - parker.sikand
Eklemek zorundaydım tabindex="-1" göre #menuscontainer çalışmasını sağlamak için. Konteynerin içine bir giriş etiketi koyarsanız ve üzerine tıklarsanız, konteyner gizlenir. - tyrion
mouseleave olayı menüler ve kaplar için daha uygundur (ref: w3schools.com/jquery/...) - Evgenia Manolova


Şimdi bunun için bir eklenti var: dış olaylar (Blog yazısı)

Aşağıdakiler bir clickoutside işleyici (WLOG) bir öğeye bağlı:

  • öğe, tüm öğeleri içeren bir diziye eklenir clickoutside işleyicileri
  • a (İsim alanlı) tık İşleyici belgeye bağlı (henüz yoksa)
  • herhangi bir tık belgede clickoutside Bu dizideki öğeler için eşit olmayan veya bir üst öğe olan öğeler için etkinlik tetiklenir. tık- hedefler
  • ek olarak, event.target için clickoutside Etkinlik, kullanıcının tıkladığı öğeye ayarlandı (böylece, kullanıcının yalnızca tıkladığını değil, kullanıcının ne tıkladığını bile bilirsiniz)

Bu nedenle, yayılma ve ek olarak hiçbir olay durdurulmaz. tık İşleyicileri, elemanın dış işleyiciyle "yukarısında" kullanılabilir.


31



Güzel eklenti. "Dış etkinlikler" bağlantısının bağlantısı kesilirken, blog yayını bağlantısı canlıdır ve "clickoutside" türündeki etkinlikler için çok kullanışlı bir eklenti sağlar. Ayrıca MIT lisanslıdır. - TechNyquist
Büyük eklenti. Mükemmel çalıştı. Kullanım şöyle: $( '#element' ).on( 'clickoutside', function( e ) { .. } ); - Gavin