1

I'm having a very strange issue where an element being clicked sometimes has it's event.target.dataset properties populated, and sometimes does not (it doesn't even have a .target it seems). Clicking the same element multiple times will sometimes work, and sometimes not, seemingly at random.

    handleAppointmentClick(event) {

        console.log(event);
        console.log(JSON.parse(JSON.stringify(event.target.dataset)));
        let selectedSlotId = event.target.dataset.id; //sometimes ends up undefined, sometimes does not.
        let selectedDay;
        let scheduleSlot;

        
        console.log('Selected Slot id: ' + selectedSlotId);
        console.log('Scheduler days');
        console.log(this._schedulerDays);
        
        for (const day of this._schedulerDays) {
            for (const slot of day.slots) {
                if (slot.id == selectedSlotId && slot.available) {
                    scheduleSlot = slot;
                    selectedDay = day;
                    break;
                }
            }
            if(scheduleSlot && selectedDay) break;
        }
        if (!scheduleSlot) handleError(`Unable to locate selected slot ${selectedSlotId}. Please try again later`, this);
        else{
            this._selectedSlot = scheduleSlot;
            this._selectedDay = selectedDay;
            this.openBookingModal();
        }
    }
}
                        <template for:each={day.slots} for:item="slot">
                            <div key={slot.id} class={slot.styles} data-id={slot.id}>
                                <div class="slds-text-heading_small">
                                    {slot.startSlotLabel}
                                </div>
                            </div>
                        </template>

The results of clicking the same div 3 times. Two errors, one success

enter image description here

enter image description here

I am utterly baffled at this behavior. Any insight would be much appreciated.

1 Answer 1

4

The inner div is the target, but the handler is in the outer div. Depending on where you click, a different target may be hit (parent vs child element). Use currentTarget, instead. The target is the element that originally fired the event, while the current target is the element with the attached handler.

1
  • Yup, that did it. I was so focused on the odd behavior I was seeing the javascript I totally overlooked that my HTML was kinda goofy with the event handler on one thing and the attribute on another. Thanks a ton, that was driving me crazy! Just needed another set of eyes.
    – Kenji776
    Commented Feb 28, 2023 at 21:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .