HTML⿏标事件（单击，双击，悬停，按下，移动）
在html中，元素可⽤onclick、ondblclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove来对⿏标的各种事件进⾏响应。本例演⽰了⿏标对元素的单击、双击、悬停、移⾛、按下、松开、在元素内的移动来更改元素的背景⾊。
eg：
<head>
<meta charset="utf-8">
<style>
#container{
width: 570px;
height: 200px;
}
dl{
float: left;
}
dt{
width: 90px;
height: 90px;
background-color: lightblue;
border-radius: 20px;
margin: 10px;
}
.yellow{
background-color: lightgoldenrodyellow;
}
.blue{
background-color: lightblue;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<dl>
ondblclick是什么意思<dt onclick="f1(this)"></dt>
<dd>单击</dd>
</dl>
<dl>
<dt ondblclick="f2(this)"></dt>
<dd>双击</dd>
</dl>
<dl>
<dt onmouseover="this.className='yellow'" onmouseout="this.className='blue'"></dt>
<dd>悬停</dd>
</dl>
<dl>
<dt onmousedown="this.className='yellow'" onmouseup="this.className='blue'"></dt>
<dd>按下</dd>
</dl>
<dl>
<dt id="ele" onmousemove="mouseMove(event)"></dt>
<dd>移动</dd>
</dl>
<br><span id="echo"></span>
</div>
<script>
var num1=0,num2=0;
function f1(e){
num1++;
if(num1%2==0)
e.className="blue";
else
e.className="yellow";
}
function f2(e){
num2++;
if(num2%2==0)
e.className="blue";
else
e.className="yellow";
}
function mouseMove(ev){
ev=ev||window.event;
var ElementById("ele");
var x=ev.clientX-el.offsetLeft;
var y=ev.clientY-el.offsetTop;
if(x<el.offsetWidth/2)
el.style.background="lightgoldenrodyellow";
else
el.style.background="lightpink";
</script>
</body>
运⾏结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。