After binding @ click to the parent element, how do you prevent the child element from calling the method of @ click?

such as code:

<!-- html -->
<a @click="changeColor()">
    <span>123</span>
</a>
<script>
    ....
    methods:{
        changeColor:function(e){
            $(e.target).addClass(select);
            a
        }
    }
</script>

the above code runs, and when clicked, the child element span also runs the changeColor () method and adds class- "select" unless span does not overwrite the parent element a tag. Please tell me how to make the a tag only add select

after clicking.
Mar.23,2021

<a>
  <span @click.stop></span>
</a>

the event agent uses

only for the target object of the event found by e.target.
e.currentTarget.addClass(select);

Test is feasible


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

I used .stop to have no effect, and I don't know why. Finally, I tied a method to span, passed $event into it, then wrote $event.stopPropagation (); to stop the event from bubbling, and then it was OK


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


just stop the event from bubbling. .stop





< form v-on:submit.prevent > < / form >



< div vlnlylyclick.self = "doThat" >. < / div >

Menu