js事件之onmousedown和onmouseup

最新推荐文章于 2023-07-05 23:37:25 发布
最新推荐文章于 2023-07-05 23:37:25 发布
阅读量7.1k 收藏 1
点赞数 2
分类专栏： js 文章标签： onmousedown onmouseup js鼠标事件 js事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stronglyh/article/details/47000075
版权 
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}

function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>

<p id="p1" οnmοusedοwn="mouseDown()" οnmοuseup="mouseUp()">
请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>

</body>
</html>

你所有承诺
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4083
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
JavaScript -- onmousedown 事件
Learning By Doing
05-01 2973
html文件 onMousedown capture Important source data that someone might want to look at.
原生js实现元素拖拽onmousedown/onmousemove/onmouseup
weixin_43633329的博客
03-17 1078
文章目录前言一、实现思路二、具体步骤1.鼠标在元素上按下时2.鼠标拖拽元素时3.鼠标抬起事件4.完整代码总结 前言 我们在网页操作的时候，经常用到鼠标拖拽元素的行为。本篇文章就来讨论一下鼠标拖拽元素的原理及简单的实现过程。 一、实现思路 首先鼠标拖拽要用到三大事件 onmousedown：鼠标选择元素 onmousemove：鼠标移动元素 onmouseup：释放元素，也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。 那么如何进行拖拽移动呢，主要是根据我们鼠标移动时的坐标变化来实
js之onmousedown实现拖拽效果-控制范围
JackieDYH的博客
04-08 1572
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; width: 300px; hei...
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1665
<!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.
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
10-29
在JavaScript中，`onmousedown`、`onmouseup` 和 `onclick` 是三个常见的鼠标事件，分别对应于鼠标按钮被按下、释放以及单击操作。在同一个元素上同时使用这三个事件可以实现更复杂的交互功能，但同时也可能带来一些...
js函数中onmousedown和onclick的区别和联系探讨
11-30
这两个事件很常见。... 简单的说onclick = onmousedown + onmouseup; 如果在某个地方按下鼠标后移开鼠标在另外一个地方松开鼠标会触发onmousedown事件，但是onclick事件却不会被触发。 我们今天要实现的功能是点击a
关于js中的鼠标事件总结
12-12
js中鼠标事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的这些事件都包含有一个事件对象event，当然在IE低版本下，event对象是挂在window底下的。这个我们另行讨论。 1.通过html添加...
js 事件小结 表格区别
12-11
一般事件 事件 浏览器支持 描述 onClick HTML: 2|3|3.2|4Browser: IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2|3|3.2|4Browser:IE4|N4|O 鼠标双击事件 onMouseDown ...
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
最新发布
Cosmoshhhyyy的博客
07-05 1565
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
原生js实现拖拽功能基本思路详解
12-10
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove：鼠标移动事件 3.onmouseup：鼠标抬起事件   拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。 基本思路如下： 拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x和y坐标 记录
html5 onmousedown,JavaScript onmousedown 事件：鼠标任何一个按键被按下
weixin_35252187的博客
06-20 518
JavaScript onmousedown 事件当鼠标按键(任何一个键)被按下时，会触发 onmousedown 事件，如下例子所示：在这个例子中，将鼠标放在图片上，当按下任何一个键时，就会弹出提示窗口：您点击了这幅图片！。您可以点击下面的图片试试：onmousedown 事件与 onClick 事件的区别onmousedown 事件与 onClick 事件在我们看来非常相似，其实 onClic...
onmousedown事件
weixin_33898876的博客
07-04 498
当在段落上按下鼠标按钮时执行一段 JavaScript：　　<p onmousedown="mouseDown()">请点击此文本！</p>　　定义和用法　　onmousedown 属性在鼠标按钮在元素上按下时触发。　　提示：相对于 onmousedown 事件的事件次序（限于鼠标左/中键）：　　onmousedown onmouseup onclick　　相对于 onmo...
js如何实现：在页面中任意位置点击鼠标，则在该位置显示一个div
群来群往的博客
06-02 7791
<scripttype="text/javascript"> window.onload=function(){ document.onmousedown=function(ev){ varoEvent=ev||event; varoDiv=document.createElement('div'); oDiv.s...
JavaScript的鼠标事件（js的鼠标事件，vue的鼠标事件）
weixin_65793170的博客
12-12 3841
js鼠标事件，相关属性： var div = document.getElementById("box") // 1、单击事件 onclick div.onclick = function(){ console.log("单击") } // 2、双击事件 ondblclick
事件的冒泡，默认行为，拖拽
m0_68344597的博客
03-30 93
阻止事件冒泡和默认行为 事件冒泡：从里往外逐个触发，在触发事件的时候会一层一层的向上冒泡（他同时会影响父类的事件） 阻止事件冒泡：就是阻止事件向上传递 btn.onclick = function(e){ e = e ||window.event //获取事件源 if( e.stopPropagation){ //兼容写法 e.stopPropagation() }...
js中阻止默认事件，阻止冒泡事件
swallowliyan的专栏
10-26 3417
阻止默认事件 1、在javescript中，return flase可以阻止默认事件，但必须加在onmousedown事件中，down的事儿干完了，再加return flase。 2、在自定义函数addEvent中，return flase会失效，请使用事件对象来进行阻止。ev.preventDefault();//阻止默认事件。 3、在低版本的IE中这些都不好使，需在onmouse
学习笔记（11）js事件
dugujiuding的博客
08-31 573
js事件
使用“onmousedown”和“onmouseup”实现长按事件
Jazelle的博客
07-20 4066
通过“onmousedown”和“onmouseup”实现长按一直执行事件，回弹停止执行。
用onmousedown和onmouseup事件将文本制作成类似于<a>(超链接)标记的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜色，并弹出一个空白页。
03-28
<p id="myText" onmousedown="changeColor()" onmouseup="openLink()">这是一个文本，点击可以跳转 ``` JavaScript部分： ``` function changeColor() { document.getElementById("myText").style.color = "red";...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值