html相关问题(将两个功能区分开)

Question

请教一下，需要五个小功能，下图所示的最小化，最大化等四个按钮，需要实现点击，alert弹窗
还需要一个功能，就是蓝色区域，鼠标点击与抬起会输出坐标
怎么处理才能把这俩个功能区分开？现在点击按钮，也会显示坐标

 <style>
        .div1 {
            background-repeat: no-repeat;
            /*margin-left: 60%;*/
            margin-top: 0%;
            width: 100%;
            height: 80px;
            background: url("./img/图档/top_bg.png") repeat;
            background-size: 100% 100%;
        }
  
    </style>

```html
<div class="div1" id="div1" >

        <button onclick="showValue();">显示CEF中与窗口bind的test值</button>
        <button onclick="min();">最小化</button>
        <button onclick="max();">最大化</button>
        <button onclick="window.close();">还原</button>


</div>

<script>
  window.onload = function () {
        //鼠标按下抬起事件(获取坐标)
        var box = document.getElementById('div1');
        box.onmousedown = function(e){
            var x = e.clientX;
            var y = e.clientY;
            box.innerHTML = x+","+y;

        }
        box.onmouseup = function(e){
            var x = e.clientX;
            var y = e.clientY;
            box.innerHTML = x+","+y;
        }
</script>

```

Answer 1

你点击按钮也会显示坐标,这是浏览器的事件捕获和冒泡机制,因为你的按钮也是属于div1这个盒子里面内容的一部分,所以点击按钮浏览器认为你也同时点击了div1,所以也会触发它的点击事件

方法就是,给你的按钮的点击事件加上阻止冒泡的代码就好了

比如这个函数
showValue(event){
event.stopPropagation();//阻止浏览器冒泡事件
}
其余的按钮点击函数如法炮制就行