Событие щелчка на SVG-спрайте работает только с одним типом доступа к элементам в JS - PullRequest
Новая
       33

Событие щелчка на SVG-спрайте работает только с одним типом доступа к элементам в JS

0 голосов
/ 01 апреля 2020

Я использую шаблонизатор руля 

<div class="input-wrapper col-md-12">
    <input id="{{#if type}}{{type}}{{else}}text{{/if}}" name="{{#if type}}{{type}}{{else}}text{{/if}}"
        class="input--default" type="{{#if type}}{{type}}{{else}}text{{/if}}" data-filled="false" {{{data-rules}}}
        {{{data-messages}}} data-input-type="{{#if type}}{{type}}{{else}}text{{/if}}"/>
    <label for="{{#if type}}{{type}}{{else}}text{{/if}}" class="o-input__label">
        {{#if label}}
        {{label}}
        {{else}}
        Label
        {{/if}}
    </label>
    <span class="input-icon__svg-wrapper" id="error-icon">
        <svg viewBox="0 0 18 18" class="input-icon__svg">
            <use xlink:href="{path-to-svg-file}#error"></use>
        </svg>
    </span>
    <span class="input-icon__svg-wrapper" id="password-icon">
        <svg viewBox="0 0 18 18" class="input-icon__svg" pointer-events="none">
            <use xlink:href="{path-to-svg-file}#password" pointer-events="none"></use>
        </svg>
    </span>
</div>

// This work
// PS: [5] is the password-icon span
document.querySelectorAll('.input-icon__svg-wrapper')[5].addEventListener('click', e => {
  console.log(e)
})

// This doesn't work
document.querySelector('#password-icon').addEventListener('click', e => {
  console.log(e)
})

Может кто-нибудь объяснить мне, в чем здесь разница, и почему один работает, а другой нет.

Кроме того, скажите, пожалуйста, есть ли лучший способ обработки сценариев. Желательно, чтобы между документами не использовался атрибут onclick для тега svg/use

1 Ответ

0 голосов
/ 01 апреля 2020

Поскольку я использовал рули, я зацикливался на этом шаблоне 4 раза.

Я нацелился не на тот элемент, поэтому прямая индексация работала, а не другой метод. Очевидно, я получил массив NodeList, когда я запустил: 

document.querySelector('#password-icon').addEventListener('click', e => {
  console.log(e)
})

Это заставило меня понять, что я не был правильно нацелен на средство доступа к элементу.

...