JavaScript事件——鼠标类事件

最新推荐文章于 2024-03-16 11:36:04 发布
最新推荐文章于 2024-03-16 11:36:04 发布
阅读量157 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DebbyOctober/article/details/108273617
版权

一、鼠标类事件

先引入js文件：
在这里插入图片描述
1》onclick ====》 单击事件
鼠标移到Box，单击左键或者滚轮则会弹出1
在这里插入图片描述
在这里插入图片描述

2》ondblclick ====》双击事件
双击左键（连点两下）
在这里插入图片描述
在这里插入图片描述

3》oncontextmenu ====》右击事件
单击右键
在这里插入图片描述
在这里插入图片描述

4》onmouseover ====》鼠标移入(滑过)
在这里插入图片描述
在这里插入图片描述

当鼠标移入到盒子内，则会弹出移入。
在这里插入图片描述

5》onmouseout ====》鼠标移出
当鼠标移动到盒子外，则会弹出移出。
在这里插入图片描述

6》onmousemove ====》鼠标移入(一直会执行的代码)
只要鼠标移入到盒子内都会弹出3，一直点确定，只要鼠标在盒子内，就会一直弹3， onmouseover只弹一次，是二者的区别
在这里插入图片描述 在这里插入图片描述

7》onmousedown ====》 鼠标按下
在这里插入图片描述
在这里插入图片描述

8》onmouseup ====》 鼠标释放(松开)

喋喋小菜鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 常见鼠标事件
m0_57835615的博客
06-16 1723
在JavaScript 中，常见的鼠标事件有： （1）鼠标按下事件 （2）鼠标抬起事件 （3）鼠标单击事件 （4）鼠标双击事件、
javaScript：鼠标事件
qq_52799985的博客
09-18 337
鼠标事件是Web开发中与鼠标交互相关的事件。这些事件允许开发者捕捉和响应用户使用鼠标进行的各种操作，例如点击、移动、滚动等。
JavaScript常见鼠标事件
最新发布
liGermini526的博客
03-16 1207
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
JavaScript鼠标移动事件及案例
热门推荐
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 9186
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
JavaScript程序设计——事件处理实验报告.docx
11-11
1．实现JavaScript事件注册； 2．实现JavaScript事件处理函数；...3．实现JavaScript鼠标和键盘事件； 4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
measureArea:百度地图API——鼠标测距测面积
05-01
博客：百度地图离线API——鼠标测面积（完整）
oureffect:一些常用的javascript效果和工具类
07-06
effect1-js 图片分割效果|—— imageSwitcher 使用原生javascript写的js图片切换效果|—— library| |—— jquery.mousewheel.js 基于jquery的绑定鼠标滚轮时间的插件| |—— touchwipe.js 移动端的手势滑动事件|...
JavaScript学习小结(一)——JavaScript入门基础
01-21
比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 1.2、JavaScript是跨平台的 　JavaScript是依赖于浏览器本身的，与操作系统无关。 二、JavaScript变量 2.1、定义变量...
网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例.zip
11-22
网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例
Javascript鼠标事件汇总
11-12
里面提供了 所有的鼠标事件的汇总 对刚开始接触JS的很有用处 在实际的开发中 不能离开的一个文本
javascript鼠标事件大全
05-18
本文收集了所有关于js的鼠标事件，描述了各种事件的概念以及各种浏览器的支持情况等
【JavaScript 教程】事件——鼠标事件
油墨香^-^的博客
06-08 5592
作者 | 阮一峰 鼠标事件的种类 鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同一个元素上双击鼠标时触发。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时
JavaScript的鼠标事件（js的鼠标事件，vue的鼠标事件）
weixin_65793170的博客
12-12 3411
js鼠标事件，相关属性： var div = document.getElementById("box") // 1、单击事件 onclick div.onclick = function(){ console.log("单击") } // 2、双击事件 ondblclick
js 获取鼠标位置
huolan__34的博客
12-27 2338
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
JavaScript鼠标事件及案例
Han_Zhou_Z的博客
12-05 1875
目录 一、鼠标事件 1、鼠标事件的常用方法 （1）鼠标事件常用方法 （2） 禁止鼠标右击菜单：contextmenu （3）禁止鼠标选中：selectstart 2、鼠标事件对象 3、案例（图片随着鼠标移动） 一、鼠标事件 1、鼠标事件的常用方法 （1）鼠标事件常用方法 onclick 单击鼠标左键时触发 onfocus 获得鼠标指针焦点触发 onblur 失去鼠标指针焦.
JavaScript事件 鼠标事件
LILI_JU88的博客
03-29 3362
JavaScript事件，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说，有下面这些代 表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。 鼠标事件，就是用鼠标完成的交互动作，鼠标事件是 Web 开发中最常用的事件类型 鼠标事件类型 鼠标点击事件包括4个：click（单机）dblclick（双击）、mousedown（按下） 和 mouseup（松开），其中click件类型比...
HTML——鼠标经过图片放大特效
05-12
HTML本身不支持鼠标经过图片放大特效，但可以通过CSS和JavaScript实现。 以下是一种实现方式： HTML代码： ```html <div class="image-container"> <img src="image.jpg" alt="Image"> </div> ``` CSS代码： ```css .image-container { position: relative; overflow: hidden; } .image-container img { transition: all 0.3s ease; } .image-container:hover img { transform: scale(1.2); } ``` JavaScript代码： ```javascript // 获取所有图片容器元素 var imageContainers = document.querySelectorAll('.image-container'); // 遍历所有图片容器元素 for (var i = 0; i < imageContainers.length; i++) { // 获取当前图片容器元素下的图片元素 var img = imageContainers[i].querySelector('img'); // 设置图片容器元素的宽度和高度为图片元素的宽度和高度 imageContainers[i].style.width = img.clientWidth + 'px'; imageContainers[i].style.height = img.clientHeight + 'px'; } ``` 这段代码会遍历所有图片容器元素，获取每个容器下的图片元素，然后设置容器元素的宽度和高度为图片元素的宽度和高度。这样可以确保图片容器的大小和图片大小一致，从而避免了图片放大后的溢出问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值