如何阻止父级事件传递给子级？

Question

<div class="common" @touchmove="move">
    <div class="son">
        xxxxxx
    </div>
</div>

---

move:function(e){
    let odiv = e.target; 
    console.log(odiv);//拖动父级就显示父级DOM，拖动子级就显示子级DOM，但我不想拖动子级该怎么做？
}

Answer 1

vue默认冒泡，所以在父节点加stop只是阻止继续冒泡，改成@touchmove.capture.stop="move",在捕获节段拦截事件

Answer 2

事件有捕获，目标，和冒泡三个阶段。在捕获的时候触发就不会去下面了。可以使用addEventListener来注册事件

Answer 3

试一下@touchmove.stop="move"

Answer 4

加一个判断吧

move:function(e){
    let odiv = e.target; 
    while (odiv.$el.className!='common'&&odiv.$el.$parent) odiv = odiv.$parent;
    console.log(odiv);//拖动父级就显示父级DOM，拖动子级就显示子级DOM，但我不想拖动子级该怎么做？
}