给父元素绑定@click后,怎么防止子元素调用@click的方法呢?

Question

如代码:

<!-- html -->

<a @click="changeColor()">

    <span>123</span>

</a>

<script>

    ....

    methods:{

        changeColor:function(e){

            $(e.target).addClass(select);

            修改a标签的背景颜色

        }

    }

</script>

以上代码运行起来,点击后 子元素span也会运行changeColor()方法并添加class-"select",除非span没有覆盖完父元素a标签.请问怎么使点击后只会使a标签添加select

Answer 1

$(e.currentTarget).addClass(select);

Answer 2

<a>&nbsp; <span @click.stop></span></a>

Answer 3

我用.stop没效果，也不知道为啥，最后是在span上绑了一个方法，传的$event进去，然后写的$event.stopPropagation();阻止事件冒泡，然后就可以了

Answer 4

<span&nbsp;@click.stop="children">123</span>

Answer 5

阻止事件冒泡就好啦。.stop