Скрывать div при щелчке по основному div, но не при щелчке дочерних div, hrefs, интервалов и т. д

Итак, когда вы щелкаете синий контент, я хочу его скрыть, но не если вы щелкаете дочерний элемент, например h2, a, p и т. д. Возможно ли это?

Пожалуйста, посмотрите скрипку

html

<html>
  <head></head>
  <body>
    <div id = "app">
      <div v-if = "modal" id = "content" @click = "toggle">
          <h3>
            Name
          </h3>
          <span>
            <a href = "">Like this (don't close if clicked)</a>
          </span>
      </div>
      <button @click = "toggle">Toggle</button>
    </div>
  </body>
</html>

.js

new Vue({
    el: '#app',
  data: {
    modal: true
  },
  methods: {
    toggle: function( ){
        this.modal = !this.modal
    }
  }
});

.css

a {
  color: white
}
#content {
  width: 300px;
  height: 300px;
  background: blue;
  color: white;
}

Рабочий пример: http://jsfiddle.net/awu752mr/6/

vue.js vuejs2

19.06.2018 20:17

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я считаю, что это то, что делает модификатор v-on:click.self. Смотрите здесь в документации.

19.06.2018 20:30

Как ответил @LShapz, рекомендуется использовать модификатор = .self (стиль Vue).

Другой способ - сравнить $event.target === $event.currentTarget (не рекомендуется для вашего варианта использования, но вы можете использовать эти два свойства для некоторых других ситуаций в будущем).

Vue.config.productionTip = false
new Vue({
	el: '#app',
  data: {
  	modal: true
  },
  methods: {
  	toggle: function(ev){
    	if (ev.target === ev.currentTarget) this.modal = !this.modal
    }
  }
});

a {
  color: white
}
#content {
  width: 300px;
  height: 300px;
  background: blue;
  color: white;
}

<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id = "app">
  <div v-if = "modal" id = "content" @click = "toggle($event)">
    <h3>
      Name
    </h3>
    <span>
      <a href = "">Like this</a>
    </span>
  </div>
  <button @click = "toggle">Toggle</button>
</div>

19.06.2018 20:38

Другие вопросы по теме

Невозможно получить доступ к другому классу из компонента vue

Wepack4 vuejs ssr es5: (0, _app.createApp) не является функцией

CSS: nth-of-type () Селектор для nuxt-ссылки

Как заставить обратный вызов метода машинописного текста работать в VueJs?

Auth0 пример ошибки парсинга веб-пакета

Добавить дополнительный селектор для события щелчка в (Vue v2.5.16)

Прокрутка с помощью клавиш со стрелками в раскрывающемся списке - vuejs

Vue dynamic html - не будет анализировать объект данных vue

Пагинация сервера laravel с данными в quasar framework не работает

Vue: Синтаксическая ошибка: ожидание - зарезервированное слово

Скрывать div при щелчке по основному div, но не при щелчке дочерних div, hrefs, интервалов и т. д

Ответы 2

Другие вопросы по теме

Похожие вопросы