JavaScript classList.add bei Touch in mobilen Browser?

[tel6]

Hallo,

folgender Sachverhalt bereitet mir gerade Probleme:
Ich habe eine Liste, bei dessen Elemente eine Klasse zu einem anderen Element hinzugefügt wird, wenn man sie an klickt.
Das funktioiert am Desktop auch einwandfrei. Am mobilen Browser kommt es allerdings zum Problem, dass, wenn man die Liste mit dem Daumen scrollt, die Klasse sofort zum anderen Element hinzugefügt wird, obwohl man ja nur die Liste runterscrollen wollte und nicht klicken.

Noch mal als Beispiel:

<ul>
    <li>Element1</li>
    <li>Element2</li>
    <li>Element3</li>
    <li>Element4</li>
    <li>Element5</li>
    <li>Element6</li>
</ul>

<div class="element1">
<div class="element2">
<div class="element3">
<div class="element4">
<div class="element5">
<div class="element6">

Bei Klick auf Element1 wird die Klasse "hallo" zur Klasse "element1" hinzugefügt, bei Element2 zu "element2", usw.
Auf Desktop kein Problem. Im mobile Browser, wenn man die ul Liste scrollt, jedoch fehlerhaft, da die Klasse bei Berührung sofort hinzugefügt wird, anstatt, dass die Liste gescrollt werden kann.

Ich hoffe, ich habe es gut genug erklärt.

Gibt es dafür eine Lösung?
thx

 

[netzgestaltung]

hi, zeig mal deinen click-event handler her (addEventListener()), normal sollte das schon so gehen.

 

[tel6]

Ich habe da noch ein paar andere Sachen drin, aber gekürzt sieht es so aus:

const clickEvent = (DeviceDetection.isTouchDevice()) ? 'touchstart' : 'click';

el.addEventListener(clickEvent, this._openOffcanvasById.bind(this, offcanvasId, offcanvasLevel));

_openOffcanvasById(offcanvasId, offcanvasLevel) {
        let offcanvasEl
        ....

        if (!this._isOpen(offcanvasEl)) {
            setTimeout(() => {
                offcanvasEl.classList.add(this.options.activeCls);
                this._togglePrevLevel()
            }, 100);
        }
    }

 

[netzgestaltung]

also device detection hab ich schon lange nicht mehr gesehn, sollte eigentlich nicht nötig sein. Aber ich werd schon alt - wozu bind und woher kommen deine anderen Variablen?

verkürzt würde ich das ca so schreiben:

var my_app = this;
element.addEventListener('click', function(event){
  var offcanvas_id = this.innerText.replace(' ', '').toLowerCase(), // passt zum Beispiel html oben
      offcanvas_element = document.getElementByID(offcanvas_id);
 
  offcanvas_element.classList.add(my_app.options.classnames.active);
  my_app._togglePrevLevel():
  event.preventDefault();
});

mglw. hat dein this in der funktion den falschen scope, aber ich durchschaue die moderne schreibweise nicht mehr und hab keinen bock, die noch zu lernen.

 

[floq0r]

mglw. hat dein this in der funktion den falschen scope, aber ich durchschaue die moderne schreibweise nicht mehr und hab keinen bock, die noch zu lernen.

Arrow functions do not bind their own this, instead, they inherit the one from the parent scope, which is called "lexical scoping".

Wobei ich den Syntax Funktionsdefinition in line 3 (bzw. 5) auch nicht verstehe, außer es soll Pseudocode sein.