开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React OnMouseDown事件不工作，而OnMouseUp工作正常。(在SVG元素上)

React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，可以将界面拆分成独立的可复用组件，使得开发更加高效和可维护。React提供了一系列的事件处理函数，包括OnMouseDown和OnMouseUp等。

OnMouseDown事件在鼠标按下时触发，而OnMouseUp事件在鼠标释放时触发。根据问题描述，OnMouseDown事件在SVG元素上不工作，而OnMouseUp事件正常工作。

可能的原因是SVG元素上的OnMouseDown事件没有正确绑定或者被其他事件覆盖。为了解决这个问题，可以尝试以下几个步骤：

确保正确绑定事件：在React中，可以通过在组件的render方法中为SVG元素添加事件处理函数来绑定事件。例如：

<svg>
  <circle onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} />
</svg>

其中handleMouseDown和handleMouseUp是自定义的事件处理函数。

检查其他事件是否干扰：如果SVG元素上同时存在其他事件处理函数，可能会导致事件冲突或覆盖。可以检查其他事件处理函数是否有影响，并根据需要进行调整。
确认事件是否正确触发：可以在事件处理函数中添加一些调试信息，例如打印日志或弹出提示框，以确认事件是否被正确触发。如果事件没有触发，可能需要进一步检查代码逻辑或使用浏览器开发者工具进行调试。

总结： React的OnMouseDown事件在SVG元素上不工作，而OnMouseUp事件正常工作可能是事件绑定不正确或被其他事件覆盖所导致的。可以通过正确绑定事件、检查其他事件是否干扰以及确认事件是否正确触发来解决这个问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc

相关搜索:css背景中的内联Svg属性在Edge上不能正常工作 Jquery插件无法在多个元素上正常工作 Kue没有在事件上正常工作吗？onBlur事件在chrome上工作，但在safari上不工作？onkeypress在react上能正常工作吗？onmouseup事件不能在滑块上正常工作 React <select>的<option>在onClick上不工作 react setstate在循环上不能正常工作 react-native共享在facebook上不能正常工作 React路由在Heroku上不工作，但在本地工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

函数式编程看React Hooks(二)事件绑定副作用深度剖析

函数式编程看React Hooks(一)简单React Hooks实现函数式编程看React Hooks(二)事件绑定副作用深度剖析本教程不讲解 React Hooks 的源码，只用最简单的方式来揭示...只要是我们在 isTag 更新的时候，重新去绑定事件监听中的回调函数 onMouseMove，就可以解决我们的问题。...但是更新事件函数的前提是，得先解绑旧的函数，否则的话，将会重复绑定事件。因此，react 回调函数中也提供了 return 的方式，来提供解绑。。...因为我们在添加依赖的时候，还需要对 count 也进行观察，因为每次 count 值变化，我们也得去更新绑定事件。...每次这样一个事件绑定我们都得去寻找依赖项。。那么我们非常有可能忘记添加这个依赖，导致我们整个组件无法正常地运行。幸好 react 给我提供了一个机制，那就是依赖项也接受函数。

1.9K2 0

在 Vue3 中实现飘逸的元素拖拽

的事件有一定的了解，我也是在最近的工作中才重新拾起了这块内容，通过在 Vue3 这种声明式编程风格的框架中把元素拖拽一次讲清楚。...元素的位置和移动在实现元素拖拽我们使用 mouse 事件，在 mouse 事件的回调函数中可以得到当前事件发生时元素的位置，对应的属性是 MouseEvent 中的 clientX 和 clientY...定义三组坐标分别定义用来记录元素初始位置的一组坐标（originalPosition）、元素被按下时指针在元素上的坐标（mousedownOffset）和元素在移动时实时更新的一组坐标（elementPosition...在 onMousedown 时，通过指针所在的坐标 - 被拖拽元素初始位置的坐标得到指针此时在被拖拽元素上的坐标，onMousedown 时要为 document 添加 mousemove 和 mouseup...onMouseup时，主要做的就是为 document 移除在 onMousemove 时注册的两个事件，要注意的是移除的事件要是同一个事件，也就是引用一致的事件，推荐将对应的处理事件赋值给一个变量使用

1.8K2 0

JavaScript进阶之实现拖拽

最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的react-dnd库，但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强，所以在介绍react-dnd...mouseup事件在指针设备按钮抬起时触发。当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。 JavaScript三大家族 ? ? 明白了上述?...draggable 属性：就是标签元素要设置draggable=true ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件...，此事件作用在目标元素上 ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上...ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上 Event.preventDefault()方法：阻止默认的些事件方法等执行。

2.6K4 0

手把手教你利用JS给图片打马赛克

，该对象提供了用于在画布上绘图的方法和属性本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等标记和 SVG 以及 VML 之间的差异：...标记和 SVG 以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。...这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。...嗯，我们需要利用原生的onmouseup和onmousedown事件，代表我们按下鼠标这个过程，那么这两个事件添加到哪呢？...嗯，目前来看，我们的代码依然如我们所愿的正常工作接下来的挑战更加严峻，我们需要去获取像素和处理像素，让我们再重写 start() 函数 function start() { let img =

1.4K2 0

XSS触发语句备忘

一、标准语句 alert(/XSS/) 二、尝试大小写 alert(1) 三、使用标签 1、windows事件 //图片加载错误时触发 2、鼠标事件 text //元素上点击鼠标时触发 text //元素上按下鼠标时触发 text //在元素上释放鼠标时触发十一、使用标签 text //元素上按下鼠标时触发 text //在元素上释放鼠标时触发十二、XSS编码绕过 1、html实体编码(10进制与16进制): 如把尖括号编码[ html十进制: <

2.3K5 0

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

既然要覆盖，先做些准备工作： 1.将div与Canvas画布均position:absolute，否则无法重叠。 2.将div的z-index值设置大点，保证其在Canvas画面之上。...准备工作完成后，我们先来看div的拖拽： var divObj=document.getElementById("cover"); var moveFlag=false; divObj.onmousedown...点击时光标总会“粘”在div某点上。接下来绘制图片：首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。...最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。...在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。 ?

1.8K8 0

Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

例如，如果比例因子为0.5，则单位大小为0.5像素；因此，形状的绘制大小为正常大小的一半。类似地，比例因子为2会增加单位大小，使一个单位变为两个像素；从而以正常大小的两倍绘制形状。...在进行下面的工作之前，我们先来了解下 Canvas 的事件机制。通过 addEventListener 方法可以给 Canvas 绑定一个事件。...事件坐标系在构造函数中添加对 Canvas 的 mousedown 事件监听，记录点击鼠标时相对屏幕的位置 x 和 y。...可以调用 removeEventListener 方法进行事件监听的移除，比如上述代码会在 onMouseup 中移除对 mousemove 事件的监听: onMouseup() { this.curOffset.x...的对象，而 onMouseup 方法是被 window 上的 mouseup 事件调用的，但是实际上我们想要的this指向应该 Sence 实例。

1.6K1 0

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

既然要覆盖，先做些准备工作： 1.将div与Canvas画布均position:absolute，否则无法重叠。 2.将div的z-index值设置大点，保证其在Canvas画面之上。...准备工作完成后，我们先来看div的拖拽： var divObj=document.getElementById("cover"); var moveFlag=false; divObj.onmousedown...点击时光标总会“粘”在div某点上。接下来绘制图片：首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。...最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。...在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。 ?

1.9K7 0

【React】633- 使用 Hooks 优化 React 组件

正常来说我们会这么写： import React from 'react';export default class extends React.Component { state = {newsData...} onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown} onClick={this.onClick}...={this.onMouseUp} onMouseDown={this.onMouseDown} >{title}); }} 通过容器组件对数据获取逻辑进行封装...我们先简单的了解下什么是 Hooks，它允许我们在不编写 class 的情况下使用 state 和 React 生命周期等相关特性。...div>);} 使用 useFetchMediav() 获取广告数据，通过 props 传入到组件中，通过 useMediavEvent() 获取打点相关的方法，并绑定到对应的元素上

1.2K1 0

5、React组件事件详解

）；注意：事件的回调函数被绑定在React组件上，而不是原始的元素上，即事件回调函数中的 this所指的是组件实例而不是DOM元素；了解更多React中的thisReact组件中的this。...单击触发react事件 React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React...这些焦点事件工作在 React DOM 中所有的元素上，不仅是表单元素。...onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp...onMouseEnter 和 onMouseLeave 事件从离开的元素传播到正在进入的元素，而不是普通的冒泡，并且没有捕获阶段；只有在鼠标指针穿过被选元素时，才会触发。

3.7K1 0

第53天：鼠标事件、event事件对象

-----鼠标移动 onmouseup ----------鼠标抬起 1 2 3 鼠标事件 4 <style...=function(){ 70 c++; 71 console.log(c); 72 } 73 二、event事件对象 event对象只在事件发生的过程中才有效...event对象，只是支持的方式不一样 FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意而IE在浏览器中event作为window对象的一个属性存在，可以直接使用... var con=document.getElementById('con'); /*阻止元素右击事件*/ con.oncontextmenu=...} 五、拖拽效果主要知识点： onmousedown onmousemove onmouseup event.clientX event.clientY offset client

9682 0

onmousedown和onmouseup事件「建议收藏」

在这个程序中为我们介绍两个鼠标事件onmousedown和onmouseup事件，这个两双鼠标事件分别是鼠标按下时候触发的事件和鼠标松开的时候触发的事件他们的是实现是通过调用javaScript...document.getElementById(“p1″).style.color=”green”; } 鼠标事件...– 在这个程序中我们不仅仅应该知道的是鼠标事件，也就是onmousedown 和onmouseup这两个事件，而且他们发生的时候会调用函数我们还应该知道是怎样来改变字体的颜色，在这个程序中我们改变字体的颜色是...doucment根据id获取元素，并且定义样式然后是颜色，在HTML中我们可以看到设置的过程中分好多的等级。...元素分为样式，还有value，样式有颜色这样的等级的划分 –> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

7722 0

彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

一、基于鼠标事件的拖拽原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签： , <...事件需要在window.onload时加载如果被拖动的div上有文字会有自带的文字拖动效果，需要将改div上的所有拖动事件绑定在该div上，可以使用setCapture onmousemove和onmouseup...在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如drag 和 dragover 事件类型）。 ...当用户开始拖动一个元素或选中的文本时触发 drop ondrop 当元素或选中的文本在可释放目标上被释放时触发 ps：当从操作系统向浏览器中拖动文件时，不会触发dragstart 和dragend...事件接口： HTML5为所有的拖动相关事件提供了一个新的属性：源对象和目标对象的事件间传递数据 ev.dataTransfer {}//数据传递对象源对象上的事件处理中保存数据：

3.1K3 0

【实战】Canvas实现图片上标注、缩放、移动和保存历史状态

wrap) return // 清除上一次设置的监听，以防获取参数错误 wrap.onmousedown = null wrap.onmousedown = function (event...这里监听的是容器的鼠标事件，而不是canvas画布的事件，因为这样子我们可以再移动超过边界的时候也可以进行移动操作 ?...== 0) return // 为容器添加移动事件，可以在空白处移动图片 wrap.onmousemove = (event: MouseEvent) => { const moveX...两次答案不一样啊，因为我们的偏移量是根据相对位置来计算的，如果父容器使用相对布局，则会影响我们子元素的偏移量组件代码（低配版） import React, { FC, ComponentType, useEffect...wrap) return // 清除上一次设置的监听，以防获取参数错误 wrap.onmousedown = null wrap.onmousedown = function

5.3K4 0

浏览器事件

onmouseenter: 当鼠标指针移动到元素上时触发。 onmouseleave: 当鼠标指针移出元素时触发 onmousemove: 鼠标被移动。...onmouseover: 鼠标移到某元素之上。 onmouseout: 鼠标从某元素移开。 onmouseup: 鼠标按键被松开。 onwheel: 该事件在鼠标滚轮在元素上下滚动时触发。...ononline: 该事件在浏览器开始在线工作时触发。 onoffline: 该事件在浏览器开始离线工作时触发。 onshow: 该事件当元素在上下文菜单显示时触发。...oncanplay: 事件在用户可以开始播放视频/音频时触发。 oncanplaythrough: 事件在视频/音频可以正常播放且无需停顿和缓冲时触发。...ontimeupdate: 事件在当前的播放位置发送改变时触发。 onvolumechange: 事件在音量发生改变时触发。 onwaiting: 事件在视频由于要播放下一帧而需要缓冲时触发。

2.3K2 0

vue拖动通过指令方式

可以在组件上设置指令也可以设置全局指令目标 1、移动元素并保存位置信息主要用到 onmousedown onmousemove onmouseup 在组件中设置指令 directives...: { drag: { inserted(el, binding) { let oDiv = el; oDiv.onmousedown = function...oDiv.style.left, top: oDiv.style.top, }); }; // 松开事件后...，移除事件 document.onmouseup = function (e) { document.onmousemove = null;...document.onmouseup = null; }; }; }, }, }, 使用方法 v-drag="greet" <div style

2522 0

js实现简易拖拽

// 鼠标按下后的函数,e为事件对象 function down(e) { dragging = true // 获取元素所在的坐标 boxX...document 对象上绑定 mousemove 和 mouseup 事件，不在拖拽的元素上绑定是因为当鼠标移动太快而超出元素的范围时会停止拖拽，而绑定在 document 上则可以避免这样的事情发生。...// 鼠标按下的动作 box.onmousedown = down // 鼠标的移动动作 document.onmousemove = move // 释放鼠标的动作 document.onmouseup...scrollWidth：对象的实际内容的宽度，不包括边线宽度 clientWidth：对象内容的可视区的宽度，不包括边线宽度 offsetWidth：对象整体的实际宽度，包括滚动条等边线情况一元素内无内容或者内容不超过可视区...clientWidth offsetWidth为元素的实际宽度 offsetX,clientX,pageX的辨析 offsetX,offsetY 指鼠标指针相对于触发事件元素的左上角的偏移

6.3K1 0

轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报

由于我们的技术栈采用的是 React, 目前还没有一个成熟库可以同时支持自由拖拽和缩放, 我们不得不用 react-dragable 和 react-resiable两个库来实现拖拽和缩放, 但是这样我们要维护的数据结构就相当复杂了...在 @alex_xu/rc-drag 这个库中笔者实现设置层级的功能, 所以我们可以通过给拖拽组件设置不同的层级, 来实现页面元素叠加和层的概念....另一个场景是我们要实现公共的页面渲染器, 在编辑状态下可以自由拖动缩放, 但是在预览状态下需要让元素固定, 不能出现自有拖拽等功能, 类似 h5-dooring 那种模式, 这个时候我们需要让拖拽组件@...={(e) => onMouseDown('move', e)} onMouseUp={onMouseUp} onMouseMove={onMouseMove} >..., 并将数据传给对应的事件来让外层能监听和获取.

9372 0

再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表

2 onmouseenter 当鼠标指针移动到元素上时触发。 2 onmouseleave 当鼠标指针移出元素时触发 2 onmousemove 鼠标被移动。...2 onmouseover 鼠标移到某元素之上。 2 onmouseout 鼠标从某元素移开。 2 onmouseup 鼠标按键被松开。...oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。...onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。...使用onwheel 事件替代 ononline 该事件在浏览器开始在线工作时触发。 onoffline 该事件在浏览器开始离线工作时触发。

2.1K4 0

92.精读《React PowerPlug 源码》

Active 这是一个内置鼠标交互监听的容器，监听了 onMouseUp 与 onMouseDown，并依此判断 active 状态。...bind 方法也巧妙利用了 Value 提供的 set 更新状态： export default { bind: { onMouseDown: () => set(true), onMouseUp...By the way, 还监听了 onMouseDown 与 onMouseUp: export default { bind: { tabIndex: -1, onBlur: ()...: () => (canBlur = false), onMouseUp: () => (canBlur = true) } }; 可能意图是防止在 mouseDown 时触发 blur，因为...在精读《React Hooks》文章中，介绍了 React Hooks 已经实现了这个特性。

1.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭