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

Question

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

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

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

Answer 1

Попробуйте рефакторинг вашего 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>

Answer 2

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

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

или

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

узнать больше о event modifiers

Answer 3

Это происходит потому, что ваши отрезки являются частью метки, связанной с входом (вы поместили вход внутри метки).Нажатие на метку, связанную с вводом, будет фокусировать или запускать ввод.

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