想问一下默认button点击事件行为，要使用别的标签怎么模拟？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn1" type="button">点我1</button>
</body>
</html>
这个button模式行为鼠标点击背景颜色变深，鼠标一直不送还是变深，鼠标松开颜色变化，想了好久没想出来js应该如何模拟?求大佬们帮助一下
宝慕林4294392浏览 674回答 4
4回答
-
慕雪6442864
给你写个简单的列子<!DOCTYPE html><html><head><script>function mouseDown(){document.getElementById("p1").style.color="red";}function mouseUp(){document.getElementById("p1").style.color="green";}</script></head><body><p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。</p></body></html>这样就可以了 -
肥皂起泡泡
使用:active就好了假如是span标签span:active { color:red} -
凤凰求蛊
有2种方法，一种用css控制（我注释掉了），一种js控制<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body, html { margin: 0; padding: 0; } .btn { display: inline-block; border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186); border-style: solid; border-width: 1px; padding: 1px 7px 2px; font-size: 12px; cursor: default; } .btn:active { /*background-color: #eee;*/ } </style></head><body><button id="btn1" type="button">点我1</button><div id="btn2" class="btn">点我2</div></body><script> var btn2 = document.getElementById('btn2'); btn2.addEventListener('mousedown', function (e) { btn2.style.backgroundColor = '#eee'; }) btn2.addEventListener('mouseup', function () { btn2.style.backgroundColor = '#fff'; });</script></html>
随时随地看视频慕课网APP
相关分类
JavaScript