I have a data visualization here (the second one):
http://mikeheavers.com/main/work
If you click on the circles representing skill fields, it reveals inner green circles with the particular skills. If you hold down on the green circles representing the skills, they animate, grow, and then shrink back on mouse release. However, if you simply click on the circles, they grow, but do not return to their previous size (the mousedown is not registered I guess) - which results in a circle that will constantly get bigger each time it is clicked.
Is there a way to prevent click behaviour, either through d3 or through Javascript / jQuery? I only want mouseup and mousedown.
I'm observing different behavior than what you described.
If you single click a circle, it doesn't matter how long the click is (whether it's held or not), it returns back to its original size.
If you click a circle repeatedly and quickly, this is when it starts to grow and does not return to its original size.
If you hold down a circle and then move your mouse outside of it, it both stays pink and doesn't return to its original size.
I think attaching a simple .on('mouseout', handler) to return spheres to their original size will solve the last issue, which is pretty glaring, and any missed mouseup events due to moving outside. You can also attach a mouseup to the whole document (d3.select('body').on('mouseup', handler)), which will catch any such event; then you would just need to record the last sphere that was clicked.
Additionally, to fix your original problem, you can make sure that mouseup events are triggered by adding e.preventDefault() in the mousedown events. This will prevent fast clicks from turning into double-clicks or other events by the browser.
Other posts that discuss these issues:
mouseup event isn't always triggered
mouseUp event on drag
Related
I'm trying to create a simple sketchpad using HTML+JavaScript. It consists of multiple pixel-like div elements placed next to each other. I sucessfully did so by utilising the mouseover event and when the mouse pointer moves over the 'canvas', the trail of dimmed divs can be observed.
As a next step, I would like to use the mousedown event to color the canvas only when mouse button is down. It works for a single div/pixel, but I struggle with getting the "dimmed trail" effect, as it was for mouseover.
It looks like when clicking the mouse button and moving the mouse, a div that's under the pointer "would like to" move as well. Also, the pointer changes to the "not allowed" sign. Therefore I can color only one div at a time, must release the button and click it again to color another one:
Here's my code: JS Fiddle
The problem I experience can be obtained by modifying 14th line of JS code (event change from mouseover to mousedown).
No jQuery possible.
How to disable / stop mouse movement with JavaScript?
What to do: If the mouse is being moved to, let's say, position left < 300, disable ouse movement to prevent further moving into this direction.
Is that possible?
The Pointer Lock API might be what you're looking for
https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API
Javascript can read mouse position but not set it. The mouse cursor properties exist outside the HTML Document Object Model and thus are beyond the reach of Javascript. Mouse events however are captured and thus readable / event modification also permissible (mouse hover, mouse over, mouse out, mouse click, dblclick).
You cannot do this with JavaScript and I dare say you never will be able to.
If you need to do this for some kind of game element, for example, I recommend that you place a page-element under the mouse and prevent the page-element from moving outside of the bounds even if the mouse does.
I have an app that uses mouseup and down to draw elements. The problem is that if for any reason the mouseup event is not fired after mousedown ( let's say I introduce an escape key that cancels drawing the new element), the element would be "incomplete", and hence it would cause problem. So I want to know if there is any mechanism that I can use inside mousedown to ensure that mouseup is fired after it, and if not, destroy the new element ?
You're gonna have to destroy the drawing on the events which you can think of that would make the mouseup not fire following the mousedown -- pressing keys, releasing the mouse outside of the drawing region, right clicking while left click is still holding down, switching the window with alt+tab while drawing, computer being struck with lightening in the middle of a tornado while drawing, etc.
I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.
I am in a situation where I need jQuery's mouseover event to be fired when an element (in this case an image) moves under the mouse, so unlike the common situation is an element that is moving, not the mouse.
Do you know of any library/gist/technology that could help me in this sense?
I've tried with flash but with no luck, is this something than can actually be done?
You can track mouse position by binding a handler to mousemove on the body, and calculate after every move of the image whether the pointer is over it.
I ran across a similar issue. In my case I did a "good enough" workaround by keeping track of the time the mouse last moved and then in the mouseover handler seeing if the mouse had moved recently -- within 30ms of the current time. That way I can bail out in cases where the mouse didn't actually move, but I don't have to test the hitboxes myself -- something very hard to do right and fast, and fortunately something I can leave to the browser by doing this.