js代码写出点击两个边框可以弹窗显示你鼠标点击的是左中右键中的哪一个,并把边框变为虚线
时间: 2023-12-10 19:38:56 浏览: 38
可以使用以下代码实现:
```html
<div id="box" style="width: 200px; height: 200px; border: 1px solid black;"></div>
<script>
var box = document.getElementById("box");
box.addEventListener("mousedown", function(event) {
if (event.button === 0) {
alert("你点击了左键");
} else if (event.button === 1) {
alert("你点击了中键");
} else if (event.button === 2) {
alert("你点击了右键");
}
box.style.borderStyle = "dashed";
});
box.addEventListener("mouseup", function(event) {
box.style.borderStyle = "solid";
});
</script>
```
这段代码首先创建了一个 id 为 "box" 的 div 元素,并给它设置了一个黑色实线边框。然后,通过添加 mousedown 和 mouseup 事件监听器,实现了以下功能:
- 当鼠标按下时,判断按下的是左键、中键还是右键,并通过 alert 弹窗显示出来。
- 同时,将边框样式设置为虚线。
- 当鼠标抬起时,将边框样式设置为实线。
这样,就实现了点击两个边框可以弹窗显示你鼠标点击的是左中右键中的哪一个,并把边框变为虚线的功能。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)