Ву.js-нажатие на span также нажимает на ввод. как это предотвратить?
У меня есть такой код.
<label class="pr-container">
Please confirm you have read and understood out
<span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
<span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>.
bla blabladasd
<input v-model="agreed" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
Когда я нажимаю "условия и условия" или "Политика конфиденциальности", также происходит <input v-model="agreed">
также помечается. Если щелкнуть еще раз, он не будет помечен. Я хочу, чтобы при нажатии на span флажок и его значение не изменялись вообще.
Есть идеи, почему это происходит и как этого избежать?

Ответы - Ву.js-нажатие на span также нажимает на ввод. как это предотвратить? / Vue.js - clicking on span also clicks on input. how to prevent that?

19.09.2019 09:50:16
Попробовать .stop
или .self
модификаторы, чтобы остановить распространение события следующим образом :
<span @click.stop="openConditionsModal($event, 'terms')" ...
или
<span @click.self="openConditionsModal($event, 'terms')" ...
подробнее о event modifiers


.self
модификатор



19.09.2019 10:29:48
Это происходит потому, что ваши промежутки являются частью метки, связанной с входом (вы разместили вход внутри метки). Нажатие на метку, связанную с входом, фокусирует или запускает вход.
Я бы рекомендовал реструктуризировать ваш html и использовать css, чтобы исправить это. Как правило, этот подход является более надежным и доступным, чем применение модификаторов событий, таких как stop
и prevent
.
Ваша структура может выглядеть примерно так:
<label for="agreed">Check here to indicate that you understand:</label>
<span>Terms & Conditions</span>
<span>Privacy Policy</span>
<input v-model="agreed" type="checkbox" id="agreed">
Вы можете использовать CSS и немного реструктуризации, чтобы сделать пролеты и метки все появляются как один блок. Обратите внимание, что программа чтения с экрана будет привязывать метку к входу, так что это имеет смысл само по себе является хорошей идеей.

19.09.2019 10:33:00
Попробовать рефакторинг HTML-код такой
<div class="pr-container">
Please confirm you have read and understood out
<span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
<span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>.
bla blabladasd
<label>
<input v-model="agreed" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>

