鼠标事件：
    onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。
    onmousedown：事件会在鼠标按键被按下时发生。
    onmouseup：事件会在松开鼠标按键时触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script type="text/javascript">/*鼠标事件：onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数；onmousedown：事件会在鼠标按键被按下时发生。onmouseup：事件会在松开鼠标按键时触发。*/document.onclick = function () {console.log('click');};document.onmousedown = function () {console.log('mousedown');};document.onmouseup = function () {console.log('mousemove');}
</script>
</html>

onmouseover：属性在鼠标指针移动到元素上时触发。
onmouseout： 属性在鼠标指针移动到元素外时触发。

onmouseenter：属性在鼠标指针移动到元素上时触发,
              onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。
onmouseleave：属性在鼠标指针移动到元素外时触发,
              onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div:nth-child(1) {width: 200px;height: 200px;background-color: red;}div:nth-child(2) {width: 200px;height: 200px;background-color: black;}</style>
</head>
<body>
<div></div>
<div></div>
</body>
<script type="text/javascript">/*onmouseover：属性在鼠标指针移动到元素上时触发。onmouseout： 属性在鼠标指针移动到元素外时触发。onmouseenter：属性在鼠标指针移动到元素上时触发,onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。onmouseleave：属性在鼠标指针移动到元素外时触发,onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。*/var div = document.getElementsByTagName('div')[0];div.onmouseover = function () {div.style.backgroundColor = 'blue'};div.onmouseout = function () {div.style.backgroundColor = 'red'};var div2 = document.getElementsByTagName('div')[1];div2.onmouseenter = function () {div2.style.backgroundColor = 'yellow'};div2.onmouseleave = function () {div2.style.backgroundColor = 'black'}
</script>
</html>

用button来区分鼠标的按键：
    通过onmousedown和onmouseup来进行操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script type="text/javascript">/*用button来区分鼠标的按键：通过onmousedown和onmouseup来进行操作*/document.onmousedown = function (event) {if (event.button === 0) {console.log('左键');} else if (event.button === 1) {console.log('中间滚轮');} else if (event.button === 2) {console.log('右键');}};document.onmouseup = function (event) {if (event.button === 0) {console.log('左键');} else if (event.button === 1) {console.log('中间滚轮');} else if (event.button === 2) {console.log('右键');}}
</script>
</html>

div简单拖拽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: red;position: absolute;left: 0;top: 0;}</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">/*一定要绝对定位，脱离文档流才可以移动。*/var div = document.getElementsByTagName('div')[0];var disX,disY;div.onmousedown = function (e) {disX = e.pageX - parseInt(div.offsetLeft);disY = e.pageY - parseInt(div.offsetTop);document.onmousemove = function (e) {div.style.left = e.pageX - disX + "px";div.style.top = e.pageY - disY + "px";};document.onmouseup = function () {document.onmousemove = null;}};</script>
</html>

鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽相关推荐

  1. drawforeground只有鼠标事件进入才刷新_罗技各系鼠标测评（2020年12月更新）

    喜欢玩游戏的朋友,对外设肯定是有一定要求的.好的鼠标.键盘.耳机能带给你酣畅淋漓的游戏体验.那么今天就来为大家介绍一下如何选一款适合自己的游戏鼠标.本文综合各方面参数评价,并且结合各位看官的预算,给到 ...

  2. python鼠标事件包括哪几种_python-在Tkinter中列出鼠标悬停事件函数

    我正在将医疗工具的GUI制作为课程项目.给定条件后,它应输出从不同网站(如webMD)收集的一堆治疗选项.我希望能够处理任何列出的治疗方法的鼠标悬停事件,以提供有关该治疗方法的更多信息(例如,药物类别 ...

  3. javascript 实现简单拖拽(鼠标事件 mousedown mousemove mouseup)

    效果图: 可以通过 https://littlehiuman.github.io/06-Dragable/index.html 查看效果. https://github.com/littleHiuma ...

  4. html代码怎么image标签里加鼠标形状变成手掌样式,给html标签加上鼠标划过小手样式...

    给html标签加上鼠标划过小手样式 方法:给当前标签增加样式 style="cursor:pointer;" eg:增加返回箭头样式,给箭头增加小手 - 在style中添加curs ...

  5. javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)

    javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout) onfocus/onblur:聚焦离焦事 ...

  6. 如何解决onclick与onmousedown,onmouseup的冲突，取消默认事件

    onclick是点击,一个完整的点击动作由按下鼠标键onmousedown,和弹起鼠标键onmouseup完成,所以很多时候,onclick事件和onmousedown,onmouseup混用的时候会 ...

  7. JS——事件详情（拖拽案例：onmousedown、onmousemove、onmouseup方法）

    实现拖拽案例 效果如下图所示: 代码如下图所示: 代码思路说明: 第23行代码:在div元素中触发onmousedown事件,实现鼠标在div按下,不提起功能 [区别于onclick,onclick: ...

  8. php onmouse,html在鼠标按钮在元素上按下时触发的事件属性onmousedown

    实例 当在段落上按下鼠标按钮时执行一段 JavaScript: 请点击此文本! 浏览器支持 IE Firefox Chrome Safari Opera 所有主流浏览器都支持 onmousedown ...

  9. 第53天：鼠标事件、event事件对象

    -->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果 一.鼠标事件 onclick ---------------鼠 ...

最新文章

  1. Hive On Tez，Tez 和 MapReduce engine 性能对比
  2. axure中的拐弯箭头_Axure 8.0制作水平方向上一直来回移动的箭头
  3. 他爬取了B站所有番剧信息，发现了这些……
  4. linux设置光标位置,linux下光标定位和输出颜色设置
  5. Mapx的VC开发实践
  6. PMP读书笔记(第2章)
  7. “全息数字人”——健康医疗 大数据应用的新模式
  8. Java反序列化漏洞通用利用分析
  9. 缓存在哪里_蚂蚁金服中间件(4轮题目):MVCC+缓存穿透+悲观锁+NIO+负载均衡等
  10. 蓝桥杯：BFS解决问题总结（九宫重排，跳蚱蜢，卡片交换）
  11. mysql-connector-java-5.1.22下载
  12. Sk32k144：生成hex文件和烧写（jflash）
  13. NB-IoT在无线烟感监控系统中的优势
  14. 软件测试的四个阶段，单元测试、集成测试、系统测试、验收测试
  15. shell脚本中source和expert的简单理解
  16. linux文件系统程序设计实验报告,浙江大学Linux程序设计实验报告
  17. stm32管脚重映射
  18. linux中查看ruby版本号,Ruby 版本常量
  19. hyperledger fabric 测试（九）couch DB数据库设置
  20. UVa 11909 - Soya Milk

热门文章

  1. ora-01720 授权选项对于xxxx不存在
  2. c语言如何赋值字母,C语言赋值指代简介
  3. 使用WinDbg抓取程序报错的Dump文件，例如抓取IE崩溃的Dump
  4. UIN-app打地鼠游戏制作
  5. 西门子profinet转Modbus从站远程I/O
  6. Latex——向下取整，向下取整
  7. Django框架实现可运营电商网站（二）-- 前台部分
  8. 【数据挖掘实战】——使用xgboost实现酒店信息消歧
  9. 如何设计一个亿级消息量的 IM 系统
  10. 理解“same-site“ 和 “same-origin“