[JS] muisklik in en buiten div afvangen

[PdeBie]

Hoi allen,

ik heb een formulier met op enkele velden een jQuery autocomplete. Op het moment dat je begint te typen, toont de autocomplete een lijstje met daarin de items waar je uit kan kiezen.

Als je met de muis buiten de autocomplete klikt, moet de autocomplete sluiten zonder een keus te maken. Dit heb ik tot dusver voor elkaar gekregen met:

JavaScript:

$('html').click(function (event, ui) {
    $('#<%= tbArticleNumber.ClientID %>').autocomplete('close');
});

So far so good.

Echter, op het moment dat je een item aanklikt IN de autocomplete, moet hij de select-functie uitvoeren van de autocomplete en niet de autocomplete sluiten. En hier ga ik mank.

Hoe kan ik ervoor zorgen dat de klik op/in de autocomplete er niet voor zorgt dat de autocomplete gesloten wordt?

[TheNephilim]

Voor je close statement even kijken of het aangeklikte element zich bevind in een autocomplete element?

Stel dat al je autocomplete containers de class 'autocomplete' hebben, dan if ( <element-juiste-parent>.has('.autocomplete') === false ) (of iets met length === 0 dan alleen sluiten.

[_Jeroen]

Je kunt gebruiken maken van de .not() functie.
http://api.jquery.com/not/

JavaScript:

$("body, body *").not('.CLASSVELD').click(function (event, ui) { 
    $('#<%= tbArticleNumber.ClientID %>').autocomplete('close'); 
});

[PdeBie]

ah! zoiets zocht ik

Ik zal er eens mee puzzelen.

[Verwijderd]

Hier is nou event-bubbling voor uitgevonden:

JavaScript:

$('.autocomplete').on('click', function(e) {
    e.stopPropagation();
});

Met e.stopPropagation() zorg je ervoor dat het event niet "omhoog" bubbelt naar bovenliggende DOM elementen. Het click event komt dus nooit aan op het HTML element.

[PdeBie]

probleem bij mij is, is dat hij eerder aan komt in het click event van de HTML dan in de select van de autocomplete. Als ik twee breakpoints plaats, 1 in de html click event en 1 in de select van de autocomplete, stopt hij eerst in die van de html.

[R4gnax]

pdebie schreef op woensdag 14 augustus 2013 @ 14:52:
probleem bij mij is, is dat hij eerder aan komt in het click event van de HTML dan in de select van de autocomplete. Als ik twee breakpoints plaats, 1 in de html click event en 1 in de select van de autocomplete, stopt hij eerst in die van de html.

Waarschijnlijk omdat je autocomplete select event een heel ander event is dat ergens tijdens het draaien van de autocomplete logica gegenereerd wordt.

Welk autocomplete component hebben we het hier eigenlijk over?

[PdeBie]

deze: http://jqueryui.com/autocomplete/

Voorbeeld bovengenoemde website:

JavaScript:

$( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });

En mijn versie is ook zo opgebouwd.

[R4gnax]

pdebie schreef op donderdag 15 augustus 2013 @ 08:51:
deze: http://jqueryui.com/autocomplete/

Die heeft al een automatisch sluitgedrag ingebouwd zitten zodra het gekoppelde input veld de keyboard focus verliest. Weet niet waarom je daar dan alsnog aan wilt gaan lopen sleutelen.

Als het automatisch sluiten in jouw geval niet werkt, dan doe je iets anders verkeerd wat het gedrag van de autocomplete component van jQuery UI (deels) om zeep helpt. Bij gebrek aan een kristallen bol kan ik alleen niet voorspellen wat dat ene 'iets' dan zou moeten zijn.

[PdeBie]

Ja, daar lijkt het inderdaad wel op. Ik duik de debugger weer even in.

--edit--
Probleem gevonden. Er ging vlak voor de select een postback af. De pagina is echter zo klein/snel dat dit niet opviel.

[ Voor 47% gewijzigd door PdeBie op 15-08-2013 09:53 ]