js中onmousedown、onmouseup 以及 onclick 事件

最新推荐文章于 2024-07-05 16:59:51 发布
最新推荐文章于 2024-07-05 16:59:51 发布
阅读量295 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/fgb-com/p/4274717.html
本文展示了如何使用HTML、CSS和JavaScript实现一个简单的按钮交互效果，当鼠标按下时改变背景色和文本内容，释放鼠标时恢复原状。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

转载于:https://www.cnblogs.com/fgb-com/p/4274717.html

原生js实现元素拖拽onmousedown/onmousemove/onmouseup
weixin_43633329的博客
03-17 1232
文章目录前言一、实现思路二、具体步骤1.鼠标在元素上按下时2.鼠标拖拽元素时3.鼠标抬起事件4.完整代码总结 前言 我们在网页操作的时候，经常用到鼠标拖拽元素的行为。本篇文章就来讨论一下鼠标拖拽元素的原理及简单的实现过程。 一、实现思路 首先鼠标拖拽要用到三大事件 onmousedown：鼠标选择元素 onmousemove：鼠标移动元素 onmouseup：释放元素，也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。 那么如何进行拖拽移动呢，主要是根据我们鼠标移动时的坐标变化来实
JavaScript -- onmousedown 事件
Learning By Doing
05-01 3092
html文件 onMousedown capture Important source data that someone might want to look at.
JS——事件详情（拖拽案例：onmousedown、onmousemove、onmouseup方法）
weixin_30270889的博客
06-05 757
实现拖拽案例 效果如下图所示： 代码如下图所示： 代码思路说明： 第23行代码：在div元素中触发onmousedown事件，实现鼠标在div按下，不提起功能　　【区别于onclick，onclick：按下、提起事件，属于两个动作（即：onmousedown+onmouseup）】 第20-21行代码：声明变量，用于计算鼠标按下位置到div位置长度距离　　（详细见下图解释分...
js之onmousedown实现拖拽效果-控制范围
JackieDYH的博客
04-08 1650
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; width: 300px; hei...
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
Cosmoshhhyyy的博客
07-05 2254
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
10-29
在JavaScript中，`onmousedown`、`onmouseup` 和 `onclick` 是三个常见的鼠标事件，分别对应于鼠标按钮被按下、释放以及单击操作。在同一个元素上同时使用这三个事件可以实现更复杂的交互功能，但同时也可能带来一些...
js函数中onmousedown和onclick的区别和联系探讨
11-30
在JavaScript中，`onmousedown`和`onclick`都是与鼠标交互相关的事件，但它们触发的时机不同，这在处理用户交互时尤其重要。`onmousedown`事件是在用户按下鼠标按钮时触发，而`onclick`事件则是在用户按下并释放鼠标...
鼠标点击事件：onmousedown与onmouseup实现动态效果
在本章节中，我们将深入探讨鼠标的按下（onmousedown）和松开（onmouseup）事件在JavaScript中的应用。鼠标事件是用户界面交互的核心组成部分，它们帮助开发者控制网页元素的响应。这两个事件在网页编程中扮演着关键...
js事件之onmousedown和onmouseup
美丽的泡沫
07-22 7172
function mouseDown() { document.getElementById("p1").style.color="red"; } function mouseUp() { document.getElementById("p1").style.color="green"; } 请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4291
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
js函数中onmousedown 和 onclick的区别和联系
一个执着的程序员
05-17 7854
这两个事件很常见。 了解这两个事件的区别，但是实际并没有使用到这两个事件的区别去做一些操作。 通常使用onclick的时候也可以使用onmousedown，使用onclick的时候更多一些。 今天碰到了非使用onmousedown不可的时候，故特此记录。 先说一下区别：onclick是在鼠标点击弹起之后触发的事件。onmousedown是在鼠标按下之后触发的事件。 简单的说onclick
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1870
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
html5 onmousedown,JavaScript onmousedown 事件：鼠标任何一个按键被按下
weixin_35252187的博客
06-20 583
JavaScript onmousedown 事件当鼠标按键(任何一个键)被按下时，会触发 onmousedown 事件，如下例子所示：在这个例子中，将鼠标放在图片上，当按下任何一个键时，就会弹出提示窗口：您点击了这幅图片！。您可以点击下面的图片试试：onmousedown 事件与 onClick 事件的区别onmousedown 事件与 onClick 事件在我们看来非常相似，其实 onClic...
JS的onclick点击 与 onmousemove鼠标事件
weixin_44543271的博客
02-02 3355
开发工具与关键技术：DW JS 作者：江金燕 撰写时间：2019、2、01 下面是我用JS弄的比较简单的关于星座图主要学习点击事件和鼠标事件 喜欢的可以试试 主要效果：就是你点击就会有关于各自星座性格的显示 当鼠标移过就会消失； 部分代码相同就显示一部分而已 注意事项 1、 注意ID的获取是否获取成功 另外注意ID是唯一的 编写JS代码ID要与HTML的 ID一致 2、 JS是否绑定成功...
onmousedown与onmouseup及onclick事件示例
cristina_song的博客
09-04 3318
onmousedown：用户鼠标按下时触发的事件。 onmouseup:鼠标抬起时触发的事件。 onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。） 示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl
onMouseDown和onCLick的区别
最新发布
weixin_63681863的博客
07-05 489
触发时机：鼠标按钮被按下的瞬间触发。onClick：鼠标按钮被按下并释放后触发。使用场景用于捕获鼠标按下的瞬间，通常用于启动诸如拖动操作等交互。onClick用于处理用户的点击行为，通常用于实际的点击操作，如按钮点击、链接跳转等。组合使用可以结合使用这两个事件来实现不同的用户交互效果，比如在设置状态以启动某个操作，在onClick执行最终的确认行为。综上所述，和onClick分别用于捕获鼠标按钮按下的瞬间和完成点击操作后的响应，各自在不同的交互阶段发挥作用。
JavaScript第 8 篇，JavaScript鼠标事件，Vue的鼠标事件（JS的鼠标事件）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
12-12 4414
⭐JavaScript中的鼠标事件允许你响应用户的鼠标操作，如点击、移动和滚动等。这些事件通常绑定到DOM元素上，当特定的鼠标操作发生时，就会触发相应的事件处理函数。这里来记录一下
原生JS-鼠标拖动
Dormiveglia-flx的博客
10-10 1400
/ 1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。//结束的位置，减去鼠标点下的位置，那么得到的位置，就是div落下的位置。// 三. 全局监听鼠标的抬起事件。//记录鼠标点下的位置。// 2. div按下后，全局监听鼠标【移动事件】。//这里还需要加上 div当前的位置， 累加。// 2. 鼠标移动，div跟着移动。// 鼠标按下的时候，开始监听鼠标的移动。// 鼠标移动后，给div赋值。// 3. 全局监听鼠标【抬起事件】。// 二. 全局监听鼠标的移动事件。
js事件基础知识
qq_68971977的博客
05-30 974
事件被触发的对象 谁被触发：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等通过函数赋值的方式完成onclick 当点击鼠标时运行的事件onmousedown 当按下鼠标按钮时运行的事件onmouseup 当松开鼠标按钮时运行的事件onmousemove 当鼠标指针移动的时候运行的事件onmouseover 当鼠标指针移动到元素之上时运行的事件（不可以阻止冒泡）onmouseout 当鼠标指针移出元素时运行的事件（不可以阻止冒泡）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值