mousedown:鼠标按钮被按下（左键历桥或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放d起时触发。不能通过键盘触发。
click:单击鼠标 左键 或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标 左键 时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发， 该事件不冒泡 ，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发， 该事件不冒空卖泡 ，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在肢亏猛元素内部移到时不断触发。不能通过键盘触发。
document.oncontextmenu =function(){return false}
document.body.onmouseup =function(e){
if(e.button===2){
console.log("右键")
that.rightHand =true
}else if(e.button===1) {
console.log("中间键")
}else {
console.log("左键")
}
}
1、如图首先在一个文件夹下创建index.html文件。
2、然后用可编辑文本文件的伍肢磨软件打开index.html文件，index.html的初始内容如图。
3、js的鼠标事件主要有onclick：单击事件ondbclick：双击事件onmouseover：鼠标移入事件onmouseout：鼠标移出饥悔事件onmousedown：鼠标按下事件onmouseup：鼠标松开事件。首先实现鼠标左键单击和双击的js代码如图。
4、编辑完index.html文件后，用浏览器打开index.html文件，效果如图。当鼠标左键单击span时显示"触发鼠标单击事件"，双击span时显示"触发鼠标双击事件"。
5、接着实现鼠标的移入和移出事件。如图修改index.html文件。
6、最后实现鼠标的点下和松起事件。如图修改index.html文件。
7、修改完index.html文件后，用浏览器打开index.html文件，效果如图。腔斗
在网上找野肆了一个代码给你<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
body,div,ul,li{
margin:0 auto
padding:0
}
body{
font:12px "宋体"
text-align:center
}
a:link{
color:#00F
text-decoration:none
}
a:visited {
color: #00F
text-decoration:none
}
a:hover {
color: #c00
text-decoration:underline
}
ul{
list-style:none
}
.main{
clear:both
padding:8px
text-align:center
}
#tabs0 {
height: 200px
width: 400px
border: 1px solid #cbcbcb
background-color: #f2f6fb
}
.menu0{
width: 400px
}
.menu0 li{
display:block
float: left
padding: 4px 0
width:100px
text-align: center
cursor:pointer
background: #FFFFff
}
.menu0 li.hover{
background: #f2f6fb
}
#main0 ul{
display: none
}
#main0 ul.block{
display: block
}
</style>
<script type="text/javascript">
function setTab(m, n) {
var tli = document.getElementById("menu" + m).getElementsByTagName("li")/*获取选项卡的LI对象*/
var mli = document.getElementById("main" + m).getElementsByTagName("ul")/*获取主显示区域对象*/
for (i = 0i <tli.lengthi++) {
tli[i].className = i == n ? "hover" : ""/*更改颂举轿选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/
mli[i].style.display = i == n ? "block" : "none"/*确定主区域显示哪一个对象*/
}
}
</script>
</head>
<body>
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onmouseover="setTab(0,0)" class="hover">新闻</li>
<li onmouseover="setTab(0,1)">评论</li>
<li onmouseover="setTab(0,2)">技术</li>
<li onmouseover="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><答睁li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）