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
相关·内容
我有一个需要捕获mousedown事件的svg元素。下面是代码。 <circle ...clickHandler() { }
onMouseUp和OnClick工作正常，但onMouseDown工作不正常</
浏览 184提问于2018-12-12得票数 4
回答已采纳
1回答
我尝试使用SVG在Dart中创建拖放行为。我有一个BasicUnit，基本上是GElement (<g>)的，现在它有一个body，它是一个RectElement。我用这个元素来移动这个单元。this.body.setAttribute('height', '$height');
this.body.onMouseDown.liste
浏览 3提问于2013-12-08得票数 2
回答已采纳
我正在转换一个按钮组件与MouseEvent<HTMLElement>在反应使用钩子。但是，我现在在每个鼠标事件上都会得到一个RangeError: Maximum call stack size exceeded错误。={onMouseDown} onFocus={onFocus} {children}
<&#
浏览 3提问于2019-11-26得票数 1
回答已采纳
2回答
我有一个工作脚本来将转换应用到SVG，以便图像是可拖动的。当我使用html元素的属性时，脚本可以工作。<g id="all" onmousedown="startMove(evt)" onmousemove="moveIt(evt)" onmouseup="endMove(evt)">
但是，我想将事件绑定到$('svg > g').m
浏览 9提问于2013-09-04得票数 0
回答已采纳
我正在编写一个主要针对iOS Safari的网站，但我也希望它能响应正常的桌面。因此，我需要让一个按钮对桌面上的onmousedown、onmouseup事件做出反应&让一个按钮对iOS上的ontouchend、react、ontouchend做出反应。注意:我不能这样做(只需注册两个事件)：
<img id="button" onmousedown="this.src=''"
浏览 2提问于2011-12-05得票数 2
回答已采纳
我有一个带有onMouseDown事件的父元素，我用它来使它可拖动。
在其中，我有几个带有onClick事件的绝对定位的子元素。我曾认为，通过对子元素应用更高的Z索引，将运行onClick而不是onMouseDown，但似乎两者都运行，如果拖动了div，则onClick事件将无法正常运行。我试图阻止事件的传播，但似乎没有帮助。如何防止当子进程上的onMouseDown</e
浏览 23提问于2018-12-04得票数 1
我编写了一个控件来捕获网页上的签名，通过使用div上的onmousedown、onmousemove和onmouseup来跟踪鼠标，并捕获组成签名的点。现在我们需要它在Windows Mobile6.5支持的设备上工作...但是似乎div元素不支持Pocket IE中的鼠标事件，而似乎支持鼠标事件。但是IE的WinCE ( WinMo/PPC基于它)版本的确实支持一些未知元素列表的鼠标事件
浏览 1提问于2010-03-25得票数 0
回答已采纳
1回答
当我将代码从基本HTML和JS转换为响应时，我面临div属性的问题我的问题是如何更改react中某个元素的scrollLeft值，当我搜索这个问题时，我得到的是将事件侦听器设置为整个窗口对象，而不是针对DOM中的特定元素。this.state = { clientX: 0, };
<
浏览 2提问于2020-05-29得票数 0
回答已采纳
4回答
elements[0].onmousedown = function(){ simulatemouseuphere;我所需要做的就是在我的函数中添加一些触发mouseup的内容，即使用户正在按住单击按钮。元素是我的整个页面范围，所以无论您单击哪里，它都会触发。
浏览 5提问于2015-07-23得票数 3
回答已采纳
3回答
我可以让onMouse下降和onMouseUp图像更改部分工作。问题是我不能让这一切一起工作。
我该怎么做？
浏览 5提问于2008-12-10得票数 1
回答已采纳
1回答
我只想在高度上有一个可调整大小的模式，所以我确实写了一些代码，但是当我试图把它扩展到底部时，因为它的速度很快，并且没有任何的影响，我也见过这样的代码，但是它们正常工作，，我不知道我错过了什么。import React, { FC, useCallback, useMemo, useRef } from "react";
import { PrimitivesT } from "..removeEventListener("mouseup", onMouseUp</
浏览 7提问于2022-04-16得票数 1
回答已采纳
2回答
我在Javascript画布上做了一个简单的玩家动作。(向左向右) clearInterval(interval);});提前感谢
浏览 1提问于2021-10-08得票数 4
回答已采纳
2回答
正确执行项目：onMouseMove、onMouseDown等上的所有事件。但是onClick没有。我可以看到按钮，但是点击它什么都不会发生。</Ul> <Article ref={ref} onContextMenu={onRightClick}
onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onM
浏览 1提问于2021-10-23得票数 0
回答已采纳
我正在为一个项目使用React，我遇到了一个奇怪的问题，我的onClick处理程序不能在IE11上工作，而只能在Windows8.1和Windows7上工作。它们在所有其他浏览器和Windows10上都工作得很好。以前有人遇到过这样的问题吗？代码非常简单，如下所示但是，onMouseUp和on
浏览 0提问于2015-11-10得票数 3
/GameArea is UniformGrid { CaptureMouse();
protectedove
浏览 4提问于2014-12-09得票数 2
回答已采纳
1回答
我在Windows10下使用wxWidget-3.1.4尝试处理来自我的类的鼠标事件。)EVT_RIGHT_DOWN(MainWindow::OnMouseDown)wxEND_EVENT_TABLE()
问题是事件菜单工作正常，OnMouseWheel也工作，但所有其他鼠标事件</
浏览 0提问于2021-02-13得票数 0
在jsx中将鼠标事件添加到对象标记时，未设置事件 console.log(event.screenX+ ' '+event.screenY);}
onMouseDown={
浏览 1提问于2018-03-13得票数 0
1回答
我使用svg绘制路径。它确实适用于我的EventHandlers，但是当我启动鼠标时，我想删除处理程序。这个应用的工作原理应该是，当你点击的时候，白板会显示所有的Eventhandler，你可以画一条线。当你不点击的时候，你就不会作画。在那一刻，当我点击一次的时候，我做了一个无休止的行。this.segments = [];
this.path = document.createElementNS("http://www.w3.org/2000/<
浏览 1提问于2019-11-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
