Почему событие Angular2 (click) не запускает <div> ?</div>

Я обнаружил странное поведение с Angular2:

(щелчок) не стреляет в это:

<div (click)="test()">test</div>

Но он работает здесь:

<div style="position: relative;" (click)="test()">test</div>

Может ли кто-нибудь объяснить это поведение? Почему необходимо установить стиль позиции, чтобы (щелчок) стрелять?

Я что-то пропустил?

Ответ 1

Ваш фрагмент кода выглядит хорошо!

Проблема в ваших стилях CSS. Ваш <div> возможно, либо наследует другое значение position либо просто - идет за другим элементом, который блокирует ваш элемент <div> (не позволяет его щелкнуть).

Изменяя позицию на relative она работает, скорее всего, потому, что эта позиция позволяет z-index и перемещает ваш <div> сверху на другой элемент, который блокирует его.

Этого должно быть достаточно, чтобы вы поняли это. Но если вы хотите получить более подробный ответ - пожалуйста, поделитесь своим CSS тоже.

Ответ 2

Я также столкнулся с подобной проблемой в основном на Iphone. в основном, указатель-событие, вызывающее застревание компонентов. Поэтому я применил следующее исправление во всех случаях, когда я применил свойство (click) в теге.

    a,
    div,
    ion-item,
    .item-md,
    .item-ios,
    .segment-button,
    .select-md
    .select-ios,
    .button-ios,
    .button-md,
    .searchbar-md,
    .searchbar-ios {
        pointer-events: auto !important;
    }

Теперь он отлично работает на платформе Android и IOS.