mouseevent Questions

Html – Missing pointerup event in child element after setting pointerCapture on parent

December 2, 2024
FaniX
2 Answers

I want to implement a drag effect on an element, so I used setPointerCapture in its pointerdown event handler like this: ele.addEventListener('pointerdown', (e)=>{ e.currentTarget.onpointermove = dosomething() e.currentTarget.setPointerCapture(e.pointerId) }) ele.addEventListener('pointerup', (e)=>{ e.currentTarget.onpointermove = null e.currentTarget.releasePointerCapture(e.pointerId) }) However, I run into problems…

VIEW QUESTION

Javascript – Can I use an event listener with two events?

I am doing a "pixel art" web page, and I don't want the "pencil" to draw when I am not pressing the button on the mouse, I try to do this but either I can make the "pencil" work with…

VIEW QUESTION

Javascript – Find the id of the div using onMouseOver event object

July 17, 2024
ForeverLearner
2 Answers

I wrote the below code to capture the id for the div, when the user hovers over the div. <div className="part-3" id="graph-1" onMouseEnter={handleHover}> <h3 className="chartHeader">Avg. marks per subject </h3> {<MarksDisplayTable/>} </div> My handleHover function looks as below - const handleHover…

VIEW QUESTION

Javascript – Zoom only using mouse wheel

June 27, 2024
Antonin Cuyala
2 Answers

I'd like to allow zooming on a canvas (excalidraw API) using only the mouse wheel like on google map , without pressing the ctrl key. Here are two things that I tried : useEffect(() => { const handleWheel = (event)…

VIEW QUESTION

Javascript – How to convert mouse position to canvas coordinate using object-fit: contain

April 27, 2024
mpromonet
2 Answers

Using object-fit: contain allow to resize a canvas to fit inside a container. This snippet is drawing a circle using mouse event position : canvas.width=1920; canvas.height=1200; const ctx=canvas.getContext("2d"); ctx.lineWidth = 10; ctx.strokeRect(0,0,canvas.width,canvas.height); canvas.onmousemove = (e) => { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.strokeRect(0,0,canvas.width,canvas.height); ctx.beginPath();…

VIEW QUESTION

Reactjs – Add 'onClick' (or another builtin) listener to custom React component?

February 7, 2024
Paul Mbusa
2 Answers

I've got a third party library providing some React components whose functionality I want to extend by adding on onClick() handler function. The handler function works however I don't know how to have this component listen for onClick() events and…

VIEW QUESTION

Html – Difference between mousedown and click

August 10, 2023
anom907 zat
3 Answers

I'm trying to create a custom editor from scratch. To move the cursor I have a system with a click handler that would move the cursor and then focus my <input> element. But I am currently implementing the selection system…

VIEW QUESTION

How to trigger keypress event with Class name using JavaScript

July 13, 2023
CrazyDev
3 Answers

I am trying to trigger a keypress event when click left mouse button in an input tag with class name. I can do with id but I don't know how to trigger with class name. How can I solve this?…

VIEW QUESTION

Html – How to get the hyperlink in a tag using javascript?

June 13, 2023
Anonymous User
2 Answers

Here I have an html with javascript: document.addEventListener('mousedown', function(event) { let elem = event.target; let jsonObject = { Key: 'mousedown', Value: event.button }; if (event.button == 2) { console.log(elem.outerHTML); } }); <span style="font-size:xx-large"> <a href="https://microsoft.com" target="_blank" rel="noreferrer noopener" shape="rect" style="color:rgb(17,85,204)">…

VIEW QUESTION