Событие Bubbled в Stencil Js не имеет правильного события.target - PullRequest
Новая
       85

Событие Bubbled в Stencil Js не имеет правильного события.target

0 голосов
/ 23 января 2020

Я начал со Stencil некоторое время go, а сегодня я провел эксперимент с всплывающими событиями.

По сути, я щелкнул дочерний элемент и прослушал его родительский элемент для mousedown. Я ожидал, что event.target будет моим дочерним компонентом. Это очень просто, например, если я запускаю этот тест с обычными элементами DOM (не с трафаретом), все работает как положено

enter image description here

DEMO

Но в Stencil event.target является родительским элементом. Вот что я сделал. Мой родительский компонент выглядит так: 

@Component({
    tag: 'app-root',
    styleUrl: 'app-root.scss',
    shadow: true 
})
export class MyApp {
    @Listen('mousedown')
    onMousedown(event) {
         console.log(event.target, event.currentTarget);
    }

    render() {
        return (
            <div>
                <my-element></my-element>
           </div> );
   }
}

И дочерний 

@Component({
    tag: 'my-element',
    styleUrl: './my-element.scss',
    shadow: true
})
export class MyElement {
    @Listen('mousedown')
    onMouseDonw(e) {
        console.log(e.target);
    }

    render() {
       return ( <div>YO</div> );
    }
}

Теперь, как я уже сказал, когда я нажимаю my-element, я сначала вижу console.log из my-element, что подтверждает, что event.target равно my-element. Но затем событие приходит к своему родителю и event.target (но также event.currentTarget) содержит app-root. Я заметил, что когда я устанавливаю shadow в false моего app-root, все это, кажется, работает, но я не понимаю, почему, и это единственное решение моей проблемы?

1 Ответ

3 голосов
/ 23 января 2020

Это считается особенностью инкапсуляции Shadow DOM. Исходная цель скрыта как «внутренняя реализация», и вместо этого событие перенаправляется на элемент хоста.

Вы можете использовать event.composedPath(), чтобы получить реальную цель (не поддерживается в IE и старых Edge). Или вы можете перехватить событие внутри компонента и перезапустить его как пользовательское событие и переслать реальный целевой элемент.

...