鍍金池/ 問答/HTML/ 給父元素綁定@click后,怎么防止子元素調(diào)用@click的方法呢?

給父元素綁定@click后,怎么防止子元素調(diào)用@click的方法呢?

如代碼:

<!-- html -->
<a @click="changeColor()">
    <span>123</span>
</a>
<script>
    ....
    methods:{
        changeColor:function(e){
            $(e.target).addClass(select);
            修改a標(biāo)簽的背景顏色
        }
    }
</script>

以上代碼運(yùn)行起來,點擊后 子元素span也會運(yùn)行changeColor()方法并添加class-"select",除非span沒有覆蓋完父元素a標(biāo)簽.請問怎么使點擊后只會使a標(biāo)簽添加select

回答
編輯回答
櫻花霓

<!-- 阻止單擊事件繼續(xù)傳播 -->

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

2018年7月7日 09:19
編輯回答
浪婳

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

2017年12月7日 13:46
編輯回答
孤島

e.target找到的事件的目標(biāo)對象，事件代理才用

e.currentTarget.addClass(select);

測試可行

2018年8月12日 08:06
編輯回答
忘了我

我用.stop沒效果，也不知道為啥，最后是在span上綁了一個方法，傳的$event進(jìn)去，然后寫的$event.stopPropagation();阻止事件冒泡，然后就可以了

2017年9月24日 08:42
編輯回答
厭惡我

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

2018年7月8日 01:41
編輯回答
她愚我
$(e.currentTarget).addClass(select);
2018年2月10日 16:06
編輯回答
別逞強(qiáng)
<a>
  <span @click.stop></span>
</a>
2017年1月22日 15:09