这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，今天是除夕，哈哈哈，咱们还是要更新更新文章，前面给大家写了很多项目，有些单纯的用css是写不来的，一些效果。我们大家在浏览网页时，是不是经常见到按钮点击的效果。今天给大家用js中的事件给大家做出按钮点击的效果。

鼠标的按下和抬起事件

前提

我们熟知，js是事件驱动语言。有很多事件类型，比如鼠标事件，键盘事件，表单事件，其他事件等。我们在点击按钮的时候，肯定是触发点击事件的，但在点击事件中又有单击事件，双击事件，左右中键事件，还有按下和抬起事件，我们在浏览网页时肯定遇到过，比如点击确定啊，右键显示菜单啊等等都是常见的。 今天我们说说

• 按下：mousedown
• 抬起：mouseup 语义化严重，很好理解

点击效果

效果图

代码实现

定位

实现之前我们复习复习相对定位与绝对定位\

• 相对定位： position: relative; 相对于自身定位，元素还是占位，不脱离文档流，相对于自身位置移动。
• 绝对定位：position: absolute; 绝对定位后，元素不占位，完全脱离文档流，注意的是：先找有定位属性的最近的祖先元素，如果没有就找浏览器了，这就是（子绝父相），经常用。

实现

我们在点击时，按钮上下移动，所以我们设置鼠标按下时，按钮上升几个像素，即可以改变按钮的top属性，鼠标抬起时，鼠标回到原来的位置。即又改变按钮的位置。\

结构

  <div>
        <p>点击我有效果</p>
    </div>

script标签

在js中先拿对象

//拿到对象
let op = document.querySelector('p')

鼠标按下事件，改变按钮的属性。

 op.onmousedown = () => {
            op.style.cssText = 'top:8px'
        }

鼠标抬起事件，改变按钮的属性

 op.onmouseup = () => {
            op.style.cssText = 'top:12px'
        }

补充一下

鼠标变小手的属性 cursor: pointer;，我是喜欢用的，毕竟是增加用户体验。 今天是给大家说说原理，其实很多地方都会用到相同的思想。比如电商网站中，商品浏览的效果还不是样的思想，怎么说呢，都是增加用户的体验。