onmousedown、onmouseup 以及 onclick事件

onmousedown、onmouseup 以及 onclick
文献种类：专题技术文献；
开发工具与关键技术：      VS   JavaScript          
作者：吴泽锋
撰写时间：2019年4月8日

12、onmousedown、onmouseup 以及 onclick 事件
	onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
	首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，
	会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
	
	例12.1：当用户按下鼠标按钮时，更换一幅图像。
		按下前: 按住后：  该效果用VS可能会出现错误，建议使用DW 开发工具。
	<body>   
		<img src = "eg_buloff.PNG" id = "myimage" onmousedown = "lighton()" onmouseup="lightoff()" /> 
		<p>按住鼠标不放可以点亮这盏灯！</p>
		<script>   
			function lighton() 
			{  document.getElementById("myimage").src = "eg_bulon.PNG";  }
			function lightoff()
			{   document.getElementById("myimage").src = "eg_buloff.PNG";  }
		</script>  
	</body>

	例12.2：通过鼠标点击获取页面内标签名称
	<body onmousedown = "whichElement(event)">
	      <p>这是p标签</p>            <h3>这是标题标签</h3>      <em>这是斜体标签</em>
	      <img src="图片路径" />
	      <script type="text/javascript">
	          function whichElement(e)
	          {   var targ;
			      if (!e) var e = window.event;
	              if (e.target) targ = e.target;  
	              else if (e.srcElement) targ = e.srcElement;
	              if (targ.nodeType == 0); // defeat Safari bug
	              targ = targ.parentNode;//父节点
	              var tname;   tname = targ.tagName;
	              alert("你正在点击的是一个" + tname + " 元素.")   
              }
	      </script>  
	</body>
	
	例12.3：哪个鼠标按钮被点击:
	说明：如果不给调用方法的标签固定一个宽度和高度，那么就会自动把范围扩散至该标签所包含的所有区域。
	          IE浏览器拥有不同的参数： 1：鼠标左键。 2：鼠标右键。 4：鼠标中键。
	注释：对于惯用左手的鼠标配置，上面的参数是颠倒的。
	<body>
		<p onmousedown = "whichButton(event)" style = "width:480px; height:100%;">
			请在文档中点击鼠标。一个消息框会提示出你点击了哪个鼠标按键。</p>
		<script type="text/javascript">  
			function whichButton(event)     
			{    var btnNum = event.button; 
				 if(btnNum == 2) { alert("鼠标右键被点击！") }
				 else if(btnNum == 0) { alert("鼠标左键被点击！") } 
			     else if(btnNum == 1) { alert("鼠标中键被点击，即滚轮！"); } 
				 else { alert( btnNum + "号键被点击，我不能确定它的名称。");     
			}  
		</script>
	</body>
	
	例13：获取鼠标在页面时的坐标；说明：和例2一样。
	<body>
		<p onmousedown="show_coords(event)">请在文档中点击。
			一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
		<script type="text/javascript"> 
			function show_coords(event)
			 { 
				x = event.clientX;   y = event.clientY;  
				alert("X 坐标: " + x + ", Y 坐标: " + y); 
			 }  
		</script>
	</body>
	
	例14：获取鼠标点击文本所处某个位置时，鼠标指针相对于屏幕的 x 和 y 坐标。
	<body>
		<p onmousedown="coordinates(event)">
		        在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。  </p>
		<script type="text/javascript">  
			function coordinates(event) 
			{   
			 	x = event.screenX;   y = event.screenY;  alert("X=" + x + " Y=" + y); 
		 	}
		</script>
	</body>
	
	例15：获取shift键是否已按住，指示当事件发生时，"SHIFT" 键是否被按下并保持住。
	<body>
		<p onmousedown="isKeyPressed(event)">
		 	在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。 </p>
		    <script type="text/javascript">
		        function isKeyPressed(event)
		        { if (event.shiftKey == 1) 
					{ alert("shift键已按住!")  } 
					else {   alert("shift键没有按住!")  }
			    }
		    </script>
	</body>
	
    借鉴于老师上课文档与W3Cchool
onmousedown、onmouseup 以及 onclick事件

猜你喜欢
