Försöker mig på att mitt klick event på min förälder inte skall bubbla ner till barnen.
Jag försöker få informationen från min button men den hämtar från min text eller svg som finns inuti.
Hur tänker jag och gör jag fel?
Koden för dropdown
Min klickar jag på min button så väljer den det jag klickar på istället, alltså path eller span etc.
Jag försöker få informationen från min button men den hämtar från min text eller svg som finns inuti.
Hur tänker jag och gör jag fel?
HTML-kod:
<button type="button" class="has-dropdown" data-target="customize-menu">
<svg aria-hidden="true" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>
<span>Customize</span>
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
Koden för dropdown
Kod:
dropdown(elem: NodeListOf<Element>, options: Object) {
elem.forEach(e => {
e.addEventListener('click', (el: any) => {
el.preventDefault();
el.stopPropagation();
el.cancelBubble = true;
console.log(el.target)
document.querySelectorAll('.is-dropdown').forEach(el => el.classList.remove('open'));
const target = (el.target as HTMLElement).dataset['target'];
if(! target) {
console.error('data-target must be set on your element.')
}
const targetEl = document.querySelector(`#${target}`);
if(! targetEl) {
console.error('Target not found.')
}
(targetEl as HTMLElement).classList.add('open');
});
});
document.addEventListener('click', (e: any) => {
if(! e.target.matches('.has-dropdown')) {
document.querySelectorAll('.is-dropdown').forEach(el => el.classList.remove('open'));
}
});
}
Min klickar jag på min button så väljer den det jag klickar på istället, alltså path eller span etc.
