鼠标事件：
    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. 1191: 冰法斗神龙 暴力枚举
  2. 2011考研英语词汇最佳记忆法 考量你的遗忘曲线
  3. 推荐一波腾讯专家的技术书单，请收下！
  4. 数字图像处理与Python实现笔记
  5. 阿里巴巴：第四财季净亏损76.54亿元，主要由于反垄断法罚款
  6. corosync+pacemaker来实现http服务的高可用性
  7. hdu 5233 Gunner II
  8. 黑马程序员C++学习笔记（第二阶段核心：面向对象）（一）
  9. 搭建vue项目时运行npm run dev 报错问题解决
  10. 1.Jenkins 2 权威指南 --- 简介
  11. python面经总结之常见的问题与基本模块的常见使用方法
  12. 知更鸟begin主题常见问题
  13. java 解析 xml中的冒号_Java jdom解析xml文件带冒号的属性
  14. linux 信号量_SystemV IPC通信信号量
  15. CCNA CCNP全套教材 CCNA CCNP视频 CCNA CCNP最新题库解析
  16. 2021-2027全球与中国触摸屏人机界面(HMI)市场现状及未来发展趋势
  17. 借助 Material You 动态配色丰富您的应用
  18. 稳压管和TVS管的工作原理
  19. 机顶盒利旧改造，实现安卓和Linux双系统启动
  20. c#模拟看板控件_C#TIPTOP电子看板

热门文章

  1. 怎样建立产品体系？（四）- 产品组合管理
  2. spdlog linux编译出错,spdlog 基本结构分析
  3. matlab暂停音频,matlab 中的实时音频
  4. 【原创】MATLAB/Simulink电动助力转向EPS模型
  5. 数据结构（一）：入门
  6. Mysql关键字的执行顺序
  7. 基于vue.js的uni app跨平台框架webapp、安卓app、苹果app、微信小程序 毕业设计 毕设作品 开题报告论文参考（2）预约订座APP系统
  8. 全球第二大成人网站，也要“自宫”了。。
  9. 4680，谁的砒霜，谁的蜜糖？
  10. The Lost Art of Structure Packing