鼠标事件

鼠标事件

html原码

<div class="father">
	    设置
		<div class="son">
			<ul>
				<li>搜索设置</li>
				<li>高级搜索</li>
				<li>关闭预测</li>
				<li>隐私设置</li>
			</ul>
		</div>
	</div>

获取元素

	var father = document.getElementsByClassName('father')[0];
	var son = document.getElementsByClassName('son')[0];

一、点击

鼠标点击onclick

father.onclick = function(){
		son.style.backgroundColor = 'pink';
	}

二、双击

鼠标双击onDblclick

father.ondblclick = function(){
		father.style.backgroundColor = 'gray';
	}

三、鼠标移入

鼠标移入onmouseover

father.onmouseover = function(){
		son.style.display = 'block';
	}

四、鼠标移出

鼠标移出onmouseout

father.onmouseout = function(){
		son.style.display = 'none';
	}

五、鼠标移动

鼠标移动onmousemove

	father.onmousemove = function(){
		son.style.backgroundColor = 'red';
	}

六、鼠标右键

鼠标移入onMouseDown

	father.onmousedown = function(){
		son.style.width = '200px';
	}