主页 / 问题 / 831449
Accepted
Alexxosipov
Asked:2020-05-22 08:11:41 +0000 UTC2020-05-22 08:11:41 +0000 UTC

跟踪顶部元素 Vue.js 的点击

  • 772

大家好。我在 2 个元素上放置了一个点击处理程序：父级和子级。子元素是绝对定位的，它覆盖在父元素之上，即 它占据了父级的一部分。但是当一个元素被点击时，vue 也会跟踪对父元素的点击。怎样成为？对我来说，有必要在单击子元素的情况下，父元素不会以任何方式做出反应。

<template>
    <div class="product" @click="openModal">
        <div class="image"><img :src="image" alt=""></div>
        <div class="info">
            <div class="wrap">
                <div class="top">
                    <div class="status">
                        <p class="status__name">Статус товара</p>
                        <div class="status__image" @click="test"> //если кликаем сюда, родительский элемент тоже реагирует
                            <img src="img/cart.png" alt="">
                            <p>+</p>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <p class="name">{{name}}</p>
                    <p class="price">{{price}} Р</p>
                </div>
            </div>              
        </div>
    </div>
</template>

<script>
    export default {
        props: ['id', 'image', 'name', 'price'],
        data: function() {
            return {

            }
        },

        methods: {
            openModal: function() {
                this.$modal.show('hello-world');
            },
            test: function() {
                console.log(123);
            }
        }
    }
</script>
javascript

2 个回答

  1. Best Answer

    click.stop https://ru.vuejs.org/v2/guide/events.html

    new Vue({
el: "#app",
        props: ['id', 'image', 'name', 'price'],
        data: function() {
            return {

            }
        },

        methods: {
            openModal: function() {
              console.log('modal')
            },
            test: function() {
              console.log("test");
            }
        }
    })
    .status {
  background: Lavender;
  height: 100vh;
}

.status__image {
  background: lightgrey;
  position: absolute;
}
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <div id="app" class="product" @click="openModal()">
        <div class="image"><img :src="image" alt=""></div>
        <div class="info">
            <div class="wrap">
                <div class="top">
                    <div class="status">
                        <p class="status__name">Статус товара</p>
                        <div class="status__image" @click.stop="test()"> //если кликаем сюда, родительский элемент тоже реагирует
                            <img src="img/cart.png" alt="">
                            <p>+</p>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <p class="name">{{name}}</p>
                    <p class="price">{{price}} Р</p>
                </div>
            </div>              
        </div>
    </div>

    • 2

  2. 例如，您可以检查点击路径，如果有需要的类，则跳过该操作。

    例子：

    new Vue({
el: "#app",
        props: ['id', 'image', 'name', 'price'],
        data: function() {
            return {

            }
        },

        methods: {
            openModal: function(e) {
            let result = false;
            for(let index in e.path) {
              let item = e.path[index]
              if (item.classList && item.classList[0] == 'status__image') result = true;
              }
                if(result) return ;
              console.log('modal')
                //this.$modal.show('hello-world');
            },
        }
    })
    .status {
  background: Lavender;
  height: 100vh;
}

.status__image {
  background: lightgrey;
  position: absolute;
}
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <div id="app" class="product" @click="openModal">
        <div class="image"><img :src="image" alt=""></div>
        <div class="info">
            <div class="wrap">
                <div class="top">
                    <div class="status">
                        <p class="status__name">Статус товара</p>
                        <div class="status__image" > //если кликаем сюда, родительский элемент тоже реагирует
                            <img src="img/cart.png" alt="">
                            <p>+</p>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <p class="name">{{name}}</p>
                    <p class="price">{{price}} Р</p>
                </div>
            </div>              
        </div>
    </div>

    • 0

相关问题