js代码写出点击两个边框可以弹窗显示你鼠标点击的是左中右键中的哪一个，并把边框变为虚线，两个文本框中分别是爸爸贺儿子，给出可执行代码

以下是一个简单的实现示例：

HTML:

<div id="box1" class="box">爸爸</div>
<div id="box2" class="box">儿子</div>

<div id="popup" style="display:none;">
  <p id="clickType"></p>
</div>

CSS:

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: inline-block;
  text-align: center;
  line-height: 100px;
}

.dashed {
  border-style: dashed;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}

JavaScript:

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let popup = document.getElementById('popup');
let clickType = document.getElementById('clickType');

box1.addEventListener('mousedown', function(event) {
  if (event.button === 0) {
    clickType.textContent = '你点击了左键';
  } else if (event.button === 1) {
    clickType.textContent = '你点击了中键';
  } else if (event.button === 2) {
    clickType.textContent = '你点击了右键';
  }
  
  box1.classList.add('dashed');
  popup.style.display = 'block';
});

box2.addEventListener('mousedown', function(event) {
  if (event.button === 0) {
    clickType.textContent = '你点击了左键';
  } else if (event.button === 1) {
    clickType.textContent = '你点击了中键';
  } else if (event.button === 2) {
    clickType.textContent = '你点击了右键';
  }
  
  box2.classList.add('dashed');
  popup.style.display = 'block';
});

document.addEventListener('mouseup', function() {
  box1.classList.remove('dashed');
  box2.classList.remove('dashed');
  popup.style.display = 'none';
});

当你点击左、中、右键时，将会在弹出的窗口中显示相应的信息，并且点击的边框将会变为虚线。当你松开鼠标时，边框将会恢复为实线。