Ву.js-нажатие на span также нажимает на ввод. как это предотвратить?

19.09.2019 09:47:40 Просмотров 44 Источник

У меня есть такой код.

<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 флажок и его значение не изменялись вообще.

Есть идеи, почему это происходит и как этого избежать?

У вопроса есть решение -

https://stackoverflow.com/questions/58017297/vue-js-clicking-on-span-also-clicks-on-input-how-to-prevent-that#comment102438173_58017297

У вас есть опция" предотвратить дефолт " в этом обработчике?

Источник

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

Boussadjra Brahim

19.09.2019 09:50:16

Попробовать .stopили .self модификаторы, чтобы остановить распространение события следующим образом :

 <span @click.stop="openConditionsModal($event, 'terms')" ...

или

  <span @click.self="openConditionsModal($event, 'terms')" ...

подробнее о event modifiers

Источник

https://stackoverflow.com/questions/58017297/vue-js-clicking-on-span-also-clicks-on-input-how-to-prevent-that/58017325#comment102438275_58017325

это не сработало, поскольку распространение событий-это соединение детей и родителей. span и этот флажок в моем примере оба являются соседями. :Д

Источник

https://stackoverflow.com/questions/58017297/vue-js-clicking-on-span-also-clicks-on-input-how-to-prevent-that/58017325#comment102438300_58017325

так что попробуй .self модификатор

Источник

https://stackoverflow.com/questions/58017297/vue-js-clicking-on-span-also-clicks-on-input-how-to-prevent-that/58017325#comment102438343_58017325

все равно ничего не вышло. я понятия не имею, почему. может быть, это из-за некоторых вещей css?

Источник

https://stackoverflow.com/questions/58017297/vue-js-clicking-on-span-also-clicks-on-input-how-to-prevent-that/58017325#comment102438503_58017325

дайте мне немного времени, чтобы воспроизвести проблему в codepen

Источник

https://stackoverflow.com/questions/58017297/vue-js-clicking-on-span-also-clicks-on-input-how-to-prevent-that/58017325#comment102439474_58017325

@HDallakyan ответ правильный, пожалуйста, проверьте это демо

Источник

Является ответом!

David Weldon

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 и немного реструктуризации, чтобы сделать пролеты и метки все появляются как один блок. Обратите внимание, что программа чтения с экрана будет привязывать метку к входу, так что это имеет смысл само по себе является хорошей идеей.

Источник

HDallakyan

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>

Источник