javascript拖动效果的一个注意事项：拖动图片时，mousemove事件会被中断

最新推荐文章于 2023-02-09 18:00:39 发布
最新推荐文章于 2023-02-09 18:00:39 发布
阅读量2.2k 收藏
点赞数
分类专栏： javascript学习笔记 文章标签： javascript firefox 浏览器 ie

转载地址: http://www.haogongju.net/art/1420536


在IE浏览器中尝试拖动一下图片，你会发现鼠标会成为禁止操作的样式，图片是被禁止拖动的。

在Firefox中拖动是加入图片收藏， 在第三次拖动时， mouseup将不会触发。

原因是因为执行了浏览器的默认事件，解决方法如下：

Firefox

在mousedown中 加入  return false;即可

IE

ie中只要在mousemove中加入return false;即可



abxn2002
关注
专栏目录
pc端拖拽时mouseup事件丢失
“明明很开心”的博客空间
12-10 2126
作为一个不停撞墙成长的小小前端码农，“尝试”着去解决问题，当解决问题后那种释然让我可以有更多的兴趣，不断成长，更加的坚持不懈。 在实现pc端拖拽左右移动元素时，使用mousedown+mousemove+mouseup实现左右拖拽移动，操作多次是总会出现不进入mouseup事件，导致无法清除mousemove事件。 1.第一次尝试 由于我要拖拽的元素中有图片，于是猜测是否浏览器默认行为变成拖拽...
鼠标对图片的操作（缩放、拖动）
fk129
07-27 2555
//鼠标滚轮缩放 function bbimg(o){ $(o).css({'width':'auto','height':'auto','max-width':'auto','max-height':'auto'}) $('.fancybox-inner').css('overflow','hidden') var zoom=parseInt(o.style.zoom, ...
js拖拽效果及遇到的问题
weixin_52028170的博客
12-15 880
一、拖拽效果 分析思路： 鼠标需要按下 mousedown 鼠标移动过程中，物体随着鼠标的移动而移动 mousemove 鼠标抬起时，物体停止移动 mouseup 注意： 1.鼠标按下事件添加给物体，鼠标移动和抬起都应该添加页面 2.鼠标相对于物体的位置 var o = document.getElementById('box');//物体 //鼠标按下事件 o.onmousedown = function (e) {
pc端拖拽时mouseup事件丢失(mousemove事件之后一直不进入mouseup事件)
最新发布
Harley567
02-09 482
pc端拖拽时mouseup事件丢失(mousemove事件之后一直不进入mouseup事件)
鼠标拖拽图片的实现
weixin_30486037的博客
10-16 281
DOM3级事件中定义了9个鼠标事件。 mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。 mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。 click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。 dblclick:双击鼠标左键时触发。 mouseover...
mousemove事件，鼠标移动过快时，无法全部响应
热门推荐
青天诀的专栏
09-01 1万+
问题描述：项目中，运用mousemove来实现绘制圆形时，发现鼠标移动速度过快时，绘制的圆形，不能连接一起，中间出现断点，无法形成一条完整的路径。问题分析：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <style type="text/css">
JavaScript实现文字与图片拖拽效果的方法
10-24
在本篇文档中，我们将重点探讨如何利用JavaScript技术实现文字与图片的拖拽效果。通过具体的代码实例，我们将深入了解整个实现过程，并学习到相关的操作技巧。 首先，我们来看一下实现文字与图片拖拽效果所涉及的...
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
10-28
本文将详细介绍如何使用JavaScript结合鼠标事件（`mousedown`、`mousemove`、`mouseup`）来实现一个简单的拖拽效果。 #### 原理分析 拖拽功能主要依赖于以下三个基本步骤： 1. **捕获点击事件**：通过监听`...
JavaScript 拖拽翻页效果代码
10-29
实现拖拽翻页效果时，还需要注意以下几点： - **浏览器兼容性**：确保代码兼容各种主流浏览器，如Chrome、Firefox、Safari、Edge和Internet Explorer。 - **性能优化**：处理`mousemove`事件时，频繁的DOM操作可能...
javascript实现漂亮的拖动层，窗口拖拽特效
10-24
本文介绍了如何使用JavaScript实现一个可拖动、可改变大小、并且具备关闭、最小化、最大化、还原功能的网页弹出层。该弹出层不仅外观美化，功能丰富，而且代码简洁实用，非常适合网页设计者在设计网页特效时参考学习...
javascript 事件处理、鼠标拖动效果实现方法详解
10-28
在探讨JavaScript实现鼠标拖动效果之前，首先要了解事件处理机制。在Web开发中，事件处理是指对用户的操作，如点击、悬停、拖动等做出响应的过程。JavaScript通过事件监听和处理函数来实现这一功能。对于鼠标拖动...
jquery实现的拖拽效果，解决拖动速度过快时的会卡现象，select的遮挡问题和透明效果
qinglinglaoren的专栏
03-29 6205
我的html 代码 弹出层 点击这里，弹出层 这是标题 X 关闭 这是内容 css样式：@charset "utf-8"; /* CSS Document */ /*作者：北京→南宫*/ body { font:12px/14px Verdana
图片onmouseup事件不能触发的解决之道
blueart的专栏
09-27 1199
最近2周一直做mapxtreme地图客户端的工作,其中用到了一些javascript!由于要拖动地图,所以定义了一个onmousedown和onmouseup方法,可是在拖动地图操作下.始终触发不了map对应的图片的onmouseup操作,几天的探索得知,只需要在jsp页面中加入[size=large][color=red]function document.onmousemove(){r...
鼠标指针被高层元素挡住时，触发下层元素的鼠标事件
weixin_30815427的博客
12-08 413
在做如下图这种拖拽效果的时候，遇到一个问题： 被拖拽的元素一直位于一个比较高的层，且一直跟随鼠标移动，这样会挡住鼠标，导致其无法触发下层元素的任何事件。这样下层的元素就无法响应拖拽的事件了。 受到这篇文章的启发：http://www.vinylfox.com/forwarding-mouse-events-through-layers/ 最终实现的思路是，在mous...
IE6不支持图片onmousemove 怎么办
weixin_30569001的博客
02-06 73
又是万恶的IE6... 1、新建一个文件csshover.htc内容如下 <attach event="ondocumentready" handler="parseStylesheets" /> <script language="JScript"> /** * Pseudos - V1.30.050121 - hover & active ...
C#窗体Click事件没反应
m0_46745664的博客
01-03 2548
C#新人，想做个转换器练练手，发现Click事件没反应... 一、事件编写完毕(想利用MessageBox测试一下，结果没反应) 二、事件绑定完成 但是，点击依然没有反应.... 三、发现问题（MouseDown事件中实现了标题栏的拖拽） 通过调试发现，我的程序经过MouseDown事件后，就不再走click，暂时不太理解，去掉后既可正常运行click事件。 不禁让我联想起Android的onEventTouch方法，当onEventTouch返回值为tr..
JS:简单的拖拽事件和bug修复
dzahao的博客
10-17 697
JS:简单的拖拽事件和bug修复
【Vue&JS】解决鼠标拖拽与点击事件冲突&元素在指定div中拖拽移动场景
喜东东的博客
05-11 6434
拖动的元素在鼠标按下时通过时间差给元素添加一个属性（drag-flag），若超过规定时间则认为是在拖拽，属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。 html: <div class="drag-area"> <div v-if="isShowHelp" class="help-control" ref="helpControl" draggable="true" @mousedown.stop=.
mousedown mouseup mousemove事件执行先后顺序_为什么我总是得到假的WM_MOUSEMOVE消息？...
weixin_39946029的博客
12-16 152
为了把这件事情搞明白，我们需要了解一下WM_MOUSEMOVE这一消息的来源(它是如何产生的)。仅仅是设置一个标志位当鼠标被用户移动的时候，鼠标会向操作系统上报一个中断，操作系统会判断当前哪个线程应该接收这一鼠标移动消息，然后会在这个线程的硬件输入队列里设置一个标志，来通知线程：”嘿，用户刚刚移动了鼠标，得注意啦”。(其实，在这个时候，通常还会有其他事情发生，不过，我们现在先忽略它们。特别是，如果...
JavaScript模拟拖拽效果详解：原理与代码实现
本篇文章主要介绍了如何在JavaScript中模拟拖拽效果，以实现类似于桌面文件夹拖动的操作。文章首先展示了最终的效果图，即元素跟随鼠标移动，当鼠标抬起时拖拽结束。核心原理是通过监听鼠标的mousedown、mousemove和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值