JS前端中如何触发子元素事件而不出发其父元素的事件

今天在做前端界面交互的时候,遇到了如题所示的问题,经查阅,发现还挺简单的,只需要在js函数里加入下面这一句代码

event.stopPropagation();//禁止触发父元素的事件

界面代码为:

<div onclick="click_Parent()">
    <span class="badge" style="float:right;" onclick="click_Children()"></span>
</div>

js代码:

function click_Parent() {
    alert("这是父控件触发的,点子控件不会触发");
}
function click_Childern() {
    event.stopPropagation();//禁止触发父元素的事件
    alert("这是子控件触发的");
}

猜你喜欢

转载自blog.csdn.net/hmq1350167649/article/details/106414914