mouseevent 相关问题

我编写了下面的代码来捕获当用户将鼠标悬停在 div 上时 div 的 id。我编写了以下代码来捕获 div 的 id，当用户 hovers 位于 div 上时。 <div className="part-3" id="graph-1" onMouseEnter={handleHover}> <h3 className="chartHeader">Avg. marks per subject </h3> {<MarksDisplayTable/>} </div> 我的 handleHover 函数如下所示 - const handleHover = (event) => { console.dir("event = " + Object.keys(event)); } 我期望 target 键将包含 div 的 id。但是，它只包含 2 个私钥。输出- event = __reactFiber$593cb2h2ba,__reactProps$593cb2h2ba 如何使用 id = graph-1 动作捕捉 onMouseEnter？你可以使用event.currentTarget.id function App(){ const handleHover = (event) => { const { id } = event.currentTarget console.log(event.currentTarget) console.log(id) } return ( <div className="part-3" id="graph-1" onMouseEnter={handleHover}> <h3 className="chartHeader">Avg. marks per subject </h3> <span>Something</span> </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="app"></div>

javascript reactjs mouseevent onmouseover

回答 1 投票 0

如何使C# WPF中的Popup可移动多次？

我创建了一个使用的用户控件我创建了一个使用的用户控件 <UserControl ....... MouseMove="UserControl_MouseMove" MouseLeftButtonUp="UserControl_MouseLeftButtonUp"> 我创建了一个单例类，它仅在参数更改后更新： public class PopUpMovement { private PopUpMovement() { } private static PopUpMovement _instance; private static readonly object _instanceLock = new object(); public static PopUpMovement Instance() { if (_instance == null) { lock (_instanceLock) { if (_instance == null) { _instance = new PopUpMovement(); } } } return _instance; } public bool draggingPopup { get; set; } public bool CustomTablePopupClicked { get; set; } } 我的代码在用户控件的代码后面： private Point startPoint; private double initialHorizontalOffset; private double initialVerticalOffset; private Point initialMousePosition; private Point startDragPoint; //private bool CustomTablePopupClicked; private void UserControl_MouseMove(object sender, MouseEventArgs e) { if (PopUpMovement.Instance().draggingPopup) { else if (PopUpMovement.Instance().CustomTablePopupClicked) { Point currentMousePosition = e.GetPosition(this); // Get the mouse position relative to the UserControl double offsetX = currentMousePosition.X - initialMousePosition.X; double offsetY = currentMousePosition.Y - initialMousePosition.Y; CustomTablePopup.HorizontalOffset += offsetX; CustomTablePopup.VerticalOffset += offsetY; initialMousePosition = currentMousePosition; // Update initial position } } } private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if(PopUpMovement.Instance().draggingPopup == true) { PopUpMovement.Instance().draggingPopup = false; PopUpMovement.Instance().CustomTablePopupClicked = false; Mouse.Capture(null); } } private void CustomTablePopup_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { // Store the mouse position //draggingPopup = true; //PopUpMovement popUpMovement = PopUpMovement.Instance(); //popUpMovement.draggingPopup = true; PopUpMovement.Instance().draggingPopup = true; initialMousePosition = e.GetPosition(this); // Get the mouse position relative to the Window Mouse.Capture(this); // Capture mouse at the UserControl level } 如果用户第一次移动弹出窗口，它工作正常，但是，如果用户想再次移动它，则什么也不会发生，它会保持固定。那么，如何修复代码以便用户可以将弹出框移动到用户想要的任何位置？我有一个“拖动适配器”(UWP)，您应该能够移植到 WPF。您将其附加到用户控件，UC 就变得可拖动。在UC中定义一个引用并在Loaded事件中初始化它。（假设 UC 是 Canvas 子项）就是这样（没有 XAML 更改）。 private DragAdapter _da = null; _da = new DragAdapter( this, ( this.Parent as Canvas ) ); 节目： using Windows.Foundation; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; /// <summary> /// Best for "tool boxes". Makes them movable. /// </summary> public class DragAdapter { private UserControl _uc = null; private Canvas _canvas = null; private bool _moveMode = false; // Offsets of uc left, top from pointer press position. private double _ucOffsetX = 0; private double _ucOffsetY = 0; /// <summary> /// /// </summary> public DragAdapter( UserControl uc, Canvas canvas ) { _uc = uc; _canvas = canvas; uc.PointerPressed += ControlPointerPressed; uc.PointerMoved += ControlPointerMoved; uc.PointerReleased += ControlPointerReleased; } //============= // PRIVATE. //============= /// <summary> /// /// </summary> private void ControlPointerPressed( object sender, PointerRoutedEventArgs e ) { _uc.CapturePointer( e.Pointer ); Point pointerPosition = e.GetCurrentPoint( _canvas ).Position; _ucOffsetX = Canvas.GetLeft( _uc ) - pointerPosition.X; _ucOffsetY = Canvas.GetTop( _uc ) - pointerPosition.Y; _moveMode = true; e.Handled = true; } /// <summary> /// /// </summary> private void ControlPointerMoved( object sender, PointerRoutedEventArgs e ) { // TO DO: KEEP RECT IN BOUNDS. if ( _moveMode == false ) { return; } Point pointerPosition = e.GetCurrentPoint( _canvas ).Position; double x = pointerPosition.X + _ucOffsetX; double y = pointerPosition.Y + _ucOffsetY; Canvas.SetLeft( _uc, x ); Canvas.SetTop( _uc, y ); e.Handled = true; } /// <summary> /// /// </summary> private void ControlPointerReleased( object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e ) { _moveMode = false; _uc.ReleasePointerCapture( e.Pointer ); e.Handled = true; } } // end class.

c# wpf popup mouseevent mousemove

回答 1 投票 0

Vue.js - 通过鼠标单击向下（而不是向上）进行事件处理

使用 Vue.js 2，当我将 @click 事件添加到元素并尝试单击某些内容时，直到完成单击（按下 -> 向上）后才会触发该事件。我如何触发...

event-handling mouseevent vue.js vuejs2

回答 1 投票 0

如何为此底座上的 mouseConstraint 创建 HTML 消息？

这就是我现在正在尝试从 Matter.js 库中进行的工作。我想使用两个事件来触发两条 HTML 消息，方法是抓住摇篮左侧的球，该球会显示“He...

javascript events dom-events mouseevent matter.js

回答 1 投票 0

设置 fillStyle 对于 Matter.JS 中的主体效果不一致

我正在使用 Matter.JS 在网站上制作交互式标题图形。我在 SVG 中有一些基本的字母路径，它们被加载、转换为形状和主体并放置在世界中。他们得到