<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200; height: 200; background-color: yellow; } .box2{ width: 200px; height: 50px; background-color: red; } .box3{ width: 200px; height: 50px; background-color: green; } </style> </head> <body> <button id="btn1" >单击</button> <button id="btn2" >双击</button> <button id="btn3" >鼠标摁下</button> <button id="btn4" >鼠标抬起</button> <div id="btn5" class="box1">鼠标移动</div> <div id="btn6" class="box2">鼠标进入特定范围触发</div> <div id="btn7" class="box3">鼠标移出特定范围触发</div> <script> var btn1 = document.getElementById("btn1") var btn2 = document.getElementById("btn2") var btn3 = document.getElementById("btn3") var btn4 = document.getElementById("btn4") var btn5 = document.getElementById("btn5") var btn6 = document.getElementById("btn6") var btn7 = document.getElementById("btn7") btn1.onclick = function(){ console.log("单击事件"); } btn2.ondblclick = function(){ console.log("双击事件"); } btn3.onmousedown = function(){ console.log("鼠标摁下"); } btn4.onmouseup = function(){ console.log("鼠标抬起"); } btn4.onmouseup = function(){ console.log("鼠标抬起"); } btn5.onmousemove = function(){ console.log("鼠标移动"); } btn6.onmouseenter = function(){ console.log("鼠标进入"); } btn7.onmouseleave = function(){ console.log("鼠标移出"); } </script> </body> </html>
老师,我在style里已经设置了宽高,为什么在控制台里显示的不一样