Javascript 当有'；里面有一个按钮

我有一个div，里面有一个按钮，我想为这两个按钮创建单独的单击事件，但是当单击按钮时，它会触发按钮事件和容器事件。有人能帮帮我吗。我没有使用jQuery

var-button=document.querySelector（'button'）；
addEventListener（'click'，function（）{
警报（“点击按钮”）；
})
var container=document.querySelector（'.container'）；
container.addEventListener（'click'，function（）{
警报（“容器已单击”）；
})

.container{
宽度：300px；
高度：300px；
边框：1px实心；
位置：相对位置；
z指数：1；
}
钮扣{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：2；
}

点击
使用
e.stopPropagation（）
停止事件从子元素传播到父元素


var-button=document.querySelector（'button'）；
按钮。addEventListener（'click'，函数（e）{
e、 停止传播（）；
警报（“点击按钮”）；
})
var container=document.querySelector（'.container'）；
container.addEventListener（'click'，function（）{
警报（“容器已单击”）；
})
.container{
宽度：300px；
高度：300px；
边框：1px实心；
位置：相对位置；
z指数：1；
}
钮扣{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：2；
}

点击
尝试
e.stopPropagation（）
在按钮上单击，从弹出事件到父级

更多信息：

工作代码：


var-button=document.querySelector（'button'）；
按钮。addEventListener（'click'，函数（e）{
e、 停止传播（）；
警报（“点击按钮”）；
})
var container=document.querySelector（'.container'）；
container.addEventListener（'click'，function（）{
警报（“容器已单击”）；
})
.container{
宽度：300px；
高度：300px；
边框：1px实心；
位置：相对位置；
z指数：1；
}
钮扣{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：2；
}

点击