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

最新推荐文章于 2023-02-09 18:00:39 发布
转载 最新推荐文章于 2023-02-09 18:00:39 发布 · 2.3k 阅读 · 0
文章标签：

#javascript #firefox #浏览器 #ie

本文探讨了在IE浏览器中禁止图片拖动的原因，并提供了在Firefox中解决此问题的方法。通过在mousedown和mousemove事件中加入returnfalse，可以避免浏览器的默认行为，实现自定义的图片拖动功能。

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

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


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

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

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

Firefox

在mousedown中 加入  return false;即可

IE

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



pc端拖拽时mouseup事件丢失
“明明很开心”的博客空间
12-10 2440
作为一个不停撞墙成长的小小前端码农，“尝试”着去解决问题，当解决问题后那种释然让我可以有更多的兴趣，不断成长，更加的坚持不懈。 在实现pc端拖拽左右移动元素时，使用mousedown+mousemove+mouseup实现左右拖拽移动，操作多次是总会出现不进入mouseup事件，导致无法清除mousemove事件。 1.第一次尝试 由于我要拖拽的元素中有图片，于是猜测是否浏览器默认行为变成拖拽...
jquery实现的拖拽效果，解决拖动速度过快时的会卡现象，select的遮挡问题和透明效果
qinglinglaoren的专栏
03-29 6302
我的html 代码 弹出层 点击这里，弹出层 这是标题 X 关闭 这是内容 css样式：@charset "utf-8"; /* CSS Document */ /*作者：北京→南宫*/ body { font:12px/14px Verdana
js拖拽效果及遇到的问题
weixin_52028170的博客
12-15 997
一、拖拽效果 分析思路： 鼠标需要按下 mousedown 鼠标移动过程中，物体随着鼠标的移动而移动 mousemove 鼠标抬起时，物体停止移动 mouseup 注意： 1.鼠标按下事件添加给物体，鼠标移动和抬起都应该添加页面 2.鼠标相对于物体的位置 var o = document.getElementById('box');//物体 //鼠标按下事件 o.onmousedown = function (e) {
pc端拖拽时mouseup事件丢失(mousemove事件之后一直不进入mouseup事件)
Harley567
02-09 688
pc端拖拽时mouseup事件丢失(mousemove事件之后一直不进入mouseup事件)
鼠标对图片的操作（缩放、拖动）
fk129
07-27 2606
//鼠标滚轮缩放 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, ...
鼠标拖拽图片的实现
weixin_30486037的博客
10-16 316
DOM3级事件中定义了9个鼠标事件。 mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。 mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。 click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。 dblclick:双击鼠标左键时触发。 mouseover...
mousemove事件，鼠标移动过快时，无法全部响应
热门推荐
青天诀的专栏
09-01 2万+
问题描述：项目中，运用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实现图片拖拽效果：代码示例与浏览器兼容性
在本节中，我们将探讨如何使用JavaScript实现图片的鼠标拖拽效果，并确保这种效果在主流浏览器如火狐中可以正常运行。鼠标拖拽是一种常见的交互操作，它允许用户通过鼠标操作来移动页面上的元素。本节会重点讲解相关...
javascript实现漂亮的拖动层，窗口拖拽特效
10-24
本文介绍了如何使用JavaScript实现一个可拖动、可改变大小、并且具备关闭、最小化、最大化、还原功能的网页弹出层。该弹出层不仅外观美化，功能丰富，而且代码简洁实用，非常适合网页设计者在设计网页特效时参考学习...
图片onmouseup事件不能触发的解决之道
blueart的专栏
09-27 1247
最近2周一直做mapxtreme地图客户端的工作,其中用到了一些javascript!由于要拖动地图,所以定义了一个onmousedown和onmouseup方法,可是在拖动地图操作下.始终触发不了map对应的图片的onmouseup操作,几天的探索得知,只需要在jsp页面中加入[size=large][color=red]function document.onmousemove(){r...
鼠标指针被高层元素挡住时，触发下层元素的鼠标事件
weixin_30815427的博客
12-08 468
在做如下图这种拖拽效果的时候，遇到一个问题： 被拖拽的元素一直位于一个比较高的层，且一直跟随鼠标移动，这样会挡住鼠标，导致其无法触发下层元素的任何事件。这样下层的元素就无法响应拖拽的事件了。 受到这篇文章的启发：http://www.vinylfox.com/forwarding-mouse-events-through-layers/ 最终实现的思路是，在mous...
IE6不支持图片onmousemove 怎么办
weixin_30569001的博客
02-06 96
又是万恶的IE6... 1、新建一个文件csshover.htc内容如下 <attach event="ondocumentready" handler="parseStylesheets" /> <script language="JScript"> /** * Pseudos - V1.30.050121 - hover & active ...
C#窗体Click事件没反应
m0_46745664的博客
01-03 2977
C#新人，想做个转换器练练手，发现Click事件没反应... 一、事件编写完毕(想利用MessageBox测试一下，结果没反应) 二、事件绑定完成 但是，点击依然没有反应.... 三、发现问题（MouseDown事件中实现了标题栏的拖拽） 通过调试发现，我的程序经过MouseDown事件后，就不再走click，暂时不太理解，去掉后既可正常运行click事件。 不禁让我联想起Android的onEventTouch方法，当onEventTouch返回值为tr..
实现图片的拖拽功能(三）
angula
02-25 1220
解决浏览器的一些兼容性问题 这时候会出现一些浏览器的兼容性问题，当我们一不小心按住atrl+a的时候，会网页上所有的内容进行选中，然后我们再进行div的移动的时候，浏览器就会默认对网页中的文字去搜索引擎中搜索，这是我们不希望看到的，此时会导致拖拽功能的异常。 但是这个是浏 览器的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为，但是在IE8以及以下版本的浏览器却并...
JS拖拽不流畅、鼠标滑动太快导致拖拽物脱离鼠标问题
weixin_45440813的博客
03-02 1万+
###拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段； ###问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止， ###解决方法： 将mousemove...
【Vue&JS】解决鼠标拖拽与点击事件冲突&元素在指定div中拖拽移动场景
喜东东的博客
05-11 8112
拖动的元素在鼠标按下时通过时间差给元素添加一个属性（drag-flag），若超过规定时间则认为是在拖拽，属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。 html: <div class="drag-area"> <div v-if="isShowHelp" class="help-control" ref="helpControl" draggable="true" @mousedown.stop=.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值