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.
Related
When having a button (or any other element, positioned absolute or fixed) on top of an element with a scrolling area which is actively scrolling (i.e. for example it's decelerating) it seems that the button doesn't receive the click event when clicked.
It seems that when clicking (or touching) the scrollable element area, the scrolling is interrupted, but the button on top of it doesn't receive any event.
I've debugged events for the floating element in Chrome and the only thing received is a mousewheel event.
This is particularly annoying if the button is a navigation button, as you have to click twice to exit the page if the content is decelerating (as opposed to once when the content is still).
I browsed many times for a solution but never found a clue about this behaviour and how to avoid it, so any thoughts will be appreciated.
Sample code here: https://codepen.io/djibarian/pen/bGLoYxY
If you scroll the red box and while still scrolling due to inertia try to click the button, you only manage to stop the scrolling in the box, but the button doesn't receive the click event.
I haven't seen your code, but it's worth checking following.
Check if any element overlaps the positioned fixed element.
Make sure the stacking context of the element is correct.
Try adding a higher z-index and see if it's working. If it works then it's worth changing the dom element order for precedence.
When using a global mousemove event attached to the window object, the mouse coordinates are not available when the mouse moves over a disabled element. Disabled elements do not fire any events, presenting a problem.
Part of my application includes a free-transform tool which allows elements to be rotated, scaled, resized and dragged around the viewport (drag & drop). The flow of my app is broken if the mouse is moved over a disabled element while freely transforming an object, because suddenly the mouse coordinates are not available to my objects until the mouse leaves the element, giving a choppy / laggy feel and a poor user experience.
I've tried the readonly attribute instead. However, this is not a viable solution as it is only supported by two elements (input and textarea) source: https://www.w3.org/TR/html4/interact/forms.html#h-17.12 and has different behaviour.
Here's a Fiddle showing the choppy / laggy behaviour: https://jsfiddle.net/rmw9anLs/2/
I understand the element itself doesn't fire any events, but I'm not attaching any events to the disabled element. I would expect the window.mousemove event to fire regardless and don't understand why a disabled element on the page would interrupt a global event listener.
Aside from implementing a custom disabled feature using JavaScript, is there a way to get the mouse coordinates without having to account for the mouse being on top of disabled elements?
You cannot, hence the disabled attribute has no effect, other than making your HTML invalid.
To stop the mouse event working, attach an event handler to the element using event.preventDefault() on it, check for a data-disabled attribute on the element in your existing click handlers or use pointer-events: none in a CSS class which you toggle on/off as needed. Also be aware that pointer-events is not well supported in IE <11
E.g:
https://jsfiddle.net/x4nLu0a5/
This is mostly an 'is this possible' type of question, because after a day of testing options, I am not sure that it is.
We have a list of item within a scrollable DIV, each of which needs to be touch draggable. Just turning on drag and drop for each time will break the ability to scroll the list, as a swipe to scroll gets interpreted as a drag event as well. The easiest option if to add a drag handle to each item, but we have very little UI space available on these items, and the powers that be were hoping to not squeeze things even tighter to add a touch hit area for said handle.
The option I am looking into is a 'touch and hold to release'. The user touched and holds the touch for one second, and the item 'unlocks' to be draggable. This sounded easiest enough when I set out, using HammerJS for the Press event, then calling a start for the drag and drop event process. This is not working out however, as none of the browser drag events can be manually started. I can call 'touchstart' with a trigger or dispatchEvent, which will do the setup we need, but no drag events every occur. 'dragstart' normally gets fired as soon as the touchstart occurs, and since I am needing to wait, there is never and dragstart to kick off the process.
I assume the browser's drag and drop events work only under specific circumstances. Triggering dragstart manually wont be a real drag event (its missing all the dataTransfer stuff), and most importantly, nothing actually gets dragged, despite the element being a valid, draggable element. Using an alternate event like 'dragover' works, but since its there was never a real dragstart, there is no actual drag and drop occurring.
Is this just something that browsers do not support short of dropping the HTML drag and drop for javascript? Or is there something I am missing?
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
I am new to JavaScript so I might be missing something obvious here, but this is the problem. I am not getting the mouse down / up event if the event happened outside the active area under JavaScript control, so if the mouse enters the active area (onmouseover event) with the left button down, is there a way to know that the button is down?
Added info : Ideally, I would like to keep track of the mouse even outside the browser window - the way Google maps does - try clicking down the mouse button and move outside the browser - this works in chrome and with some quirks in Firefox. Is it possible to do this while remaining within the bounds of JavaScript or is it some proprietary stuff?
Yes: ensure that the mouse event handlers to detect a mouse-down event are attached to some element that occupies the entire viewport. For instance the HTML (document) element...