DOM点击事件

最新推荐文章于 2024-05-05 03:05:28 发布

Zhweb_box

最新推荐文章于 2024-05-05 03:05:28 发布

阅读量2.1k

点赞数

分类专栏： js 笔记文章标签： js

本文链接：https://blog.csdn.net/ZiXiaweb/article/details/108437455

版权

js 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

笔记

15 篇文章 0 订阅

订阅专栏

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup
事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

onmousedown：用户鼠标按下时触发的事件。
onmouseup:鼠标抬起时触发的事件。
onclick:鼠标点击后触发的事件

示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
 .div1{
	 width:200px;
	 height:120px;
	 background:#abcdef;
	 border:1px solid green;
	 }
</style>

</head>
<body>
  <div id="dd" onmousedown="downClick();" onmouseup="upClick();" class="div1"></div>
<script>
  function downClick(){
    var dd=document.getElementById("dd");
	dd.style.background="red";
  }
  function upClick(){
    var dd=document.getElementById("dd");
	dd.style.background="#abcdef";
  }
</script>
</body>
</html>

效果：
没有点击时：
在这里插入图片描述
点击时：

案例2：鼠标点击改变字体大小（onclick）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标点击改变字体大小</title>
<style>
 .div1{
 	width:200px;
	height:120px;
 	background:#abcdef;
 	border:1px solid green;
 }
</style>
<script>
 function xuexiClick(){
    var dd=document.getElementById("dd");
	dd.style.fontSize=30+'px';
 }
</script>
</head>
<body>
  <div id="dd" onclick="xuexiClick();" class="div1">我爱学习，学校使我快乐</div>
</body>
</html>

效果：
点击前：
在这里插入图片描述
点击后：

案例3：例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>

效果：
在这里插入图片描述

当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

为在JavaScript中，mousedown、mouseup、click执行顺序是从左到右的，更重要的是一旦mousedown事件激活，正常情况下后面两个事件也肯定会被激活。平时我们在一个标签上只绑定一个click事件，其实触发click事件也都调用了mousedown、mouseup等事件，只是它们调用周期极短，而且我们又没有编写相关函数与这两个事件绑定，所以不会觉察到。。

Zhweb_box

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM点击事件

onmousedown, onmouseup 以及 onclick 事件onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。onmousedown：用户鼠标按下时触发的事件。onmouseup:鼠标抬起时触发的事件。onclick:鼠标点击后触发的事件示例1：鼠标按下时更换字体
复制链接

扫一扫