鼠标事件之购物筐实例

最新推荐文章于 2023-02-19 23:59:02 发布

翻译最新推荐文章于 2023-02-19 23:59:02 发布 · 339 阅读

文章标签：

#鼠标 #实例 #投放事件

javascript事件处理专栏收录该内容

4 篇文章

订阅专栏

鼠标事件
鼠标事件由鼠标或相似的用户动作触发的事件，以下常用的鼠标事件属性
onmousedown 当按下鼠标按钮触发事件
onmouseup   但松开鼠标按钮触发事件
onclick     当单击鼠标触发事件
ondbclick   当双击鼠标触发事件
onmousemove 当鼠标指针移动时触发事件
onmouseover 当鼠标移动至元素之上触发事件
onmouseout 当鼠标移动出元素之外触发事件
onscroll    当滚动元素的滚动条时触发事件
onmousewheel当转动鼠标滚轮时触发事件
ondragstart 当拖放操作开始时被拖放元素触发事件，一般在事件处理函数中设置拖放的数据源
ondrag      拖放过程中被拖放元素触发事件
ondragenter 拖放过程中鼠标进入目标元素内移动时，目标元素触发事件
ondragover 拖放过程中鼠标在目标元素内移动时，目标元素触发事件
ondragleave 拖放过程中鼠标离开目标元素是，目标元素触发该事件
ondrop      当拖放元素投放时，拖放的目标元素触发该事件

ondragend 当拖放操作结束时被拖放元素出发该事件

以下是实例：

<html>
	<head>
		<meta charset="utf-8">
		<title>拖放事件</title>
		<style type="text/css">
			#div1{width: 200px;height: 200px;border: 2px solid #aaaaaa; }
		</style>
		<script type="text/javascript">
		  function allowDrag(ev){
		  	ev.preventDefault();
		  }
		  function drag(ev){
		  	ev.dataTransfer.setData("text/plain",ev.target.id);
		  }
		  function drop(ev){
		  	ev.preventDefault();
		  	var data=ev.dataTransfer.getData("Text");
		  	ev.target.appendChild(document.getElementById(data));
		  }
		</script>
	</head>
	<body>
		<p   id="p1">可以将下面的图片投放到边框中</p>
		<div id="div1" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
		<img id="img1" src="img/p1.png" draggable="true" ondragstart="drag(event)">
	</body>
</html>