Most mouse-APIs allow one to check weather or not a mouse button was pressed or released. As an example: The Java-Swing-API also allows to check for a "click" event, that is just an additional event that get's triggered whenever a "release" event was triggered after a "press" event, though it is hard to imagine to a scenario where this does not happen.
When implementing my own UI with a common mouse API, I now wonder how to register a "click" upon a general button. I went ahead and checked various UIs used by various programs I use and I got the general feel that any button is considered "clicked" when the mouse button is released above it.
They do not require the mouse-button to be "pressed" above them before being "released". It seems the "pressed"-event only tries to catch an object to be "dragged", though most mouse-APIs have their own "dragged" event to be triggered, the "pressed" event seems to be used to select the item that should be dragged.
Then right as I write this, it seems that browsers do not allow button presses when the mouse was not "pressed" upon the button before being "released" above it.
Question 1: Do I miss something here or am I right in these observations?
As such, a "UI"-Class managing the components of any UI needs to consider:
It's components to be drawn
The components that are focused
The components that have been "pressed" and are as such "dragged"
A "click" is triggered simply when the mouse button is "released" upon all components that are "focused". Or a "click" is triggered upon all components that were "pressed" and are still "focused"?
Question 2/3: Will this implementation be a good start or do I miss something? Which one is better?
Question 1:
Pressed: event is generated when you push down the mouse button
Released: event is generated when you release the mouse button (which has been pressed down before)
Clicked: event is generated when a mouse button Pressed & Released.
Related
I'm trying to implement system-wide drag operation with middle mouse button. It should override middle mouse drag behavior in other programs. Currently, I am handling global mouse events with system-wide hooks.
Problem is - many programs still receive and handle same events like I did not intercept them.
Here's what I tried:
not call the next hook for mouse down event: I never receive mouse up, so I don't know where and when to stop dragging
not call the next hook for mouse move: cursor slows down tremendously
not call the next hook for mouse up: most windows in the system stop reacting to mouse events completely after my drag is finished
always call the next hook in the chain: if the control under mouse has scroll in it, most of the time it will be scrolling while my drag is in progress. Also UWP apps continue receiving mouse events during my drag, so if a link in MS Edge happens to be under cursor when it started, and mouse does not leave Edge boundary, Edge receives click event, and new tab is opened
What I need is: when user holds middle mouse and starts dragging, my drag handler should be called, and no other handlers, like file drag, scroll, etc should happen.
I ended up with somewhat hacky solution:
do not call the next hook for mouse down for middle button
record where it was pressed
when handling mouse up, if user did not drag - replay the whole mouse up + mouse down using SendInput from a separate thread (to avoid deadlock due to reentrancy)
I have some pages where I have a kendo ui grid (wired up to full CRUD services), but use a separate Kendo UI Toolbar control (as opposed to the toolbar configuration in the grid itself). I have a number of different buttons/menus on the toolbar, but am seeing a strange behavior when calling saveChanges() on the grid. If a cell is being edited when the save button is clicked, the grid is saved, but the edited value is lost (it reverts back to where it was). The following details what I see in different situations:
When using a save button configured in the grid (command: "save"), any changes in a cell being edited are committed with the save.
When using a plain html button that calls the saveChanges() method of the grid, any changes in a cell being edited are committed with the save.
When using a save button configured in a toolbar control, the changes in a cell being edited are LOST when saveChanges() is called.
The following jsbin shows the behavior of all three:
http://jsbin.com/jazobexatu/2/edit?html,js,output
I have tried calling the save from the toolbar button a number of different ways (even trying to trigger the click event of the external button), but nothing seems to correct the behavior. I also tried calling closeCell() on the grid (to try to force the value back into the data, but that doesn't work either). I haven't been able to debug the javascript enough to figure out what is different. I'm hoping someone with a deeper understanding of these controls can help me out.
For some reason, the mouse down event on the toolbar button doesn't cause a blur on the editor.
You can try it yourself by clicking in the cell to edit it, then click and hold the mouse button down on the "normal" button. The editor closes on mouse down, causing a blur of the editor, and persists the change.
If you do the same thing, click and hold mouse down, on the toolbar button, the editor stays open.
I've been poking through the source, but haven't figured out exactly why this happens. My best guess would be that the mousedown handler on the toolbar prevents the event from bubbling or running its default action and the editor doesn't blur.
Additional detail: On mousedown on the grid header button and the normal button, the focused element changes (which is what causes the editor blur). But on mousedown of the toolbar button, the editor input element still has the focus.
Shifting the focus on mousedown of the toolbar might be a workaround.
Sort of a weird hack, but this works in Chrome (any should in any browser that supports activeElement
click: function (e) {
$(document.activeElement).blur();
$("#grid").data("kendoGrid").saveChanges();
}
The standard sequence of events to trigger a mouse click in Windows is documented here:
MSDN
Essentially it is:
MouseDown event.
Click event.
MouseClick event.
MouseUp event.
However, I have a control which is altering the sequence of events by capturing events on its children (to implement dragging). That means that the full sequence might not execute, e.g. currently I have a button which sees a MouseDown event, but no MouseUp event when the mouse is clicked.
Therefore the question is, what actually triggers the click at a low-level? Does it need a MouseDown followed by a MouseUp. Will a MouseUp on its own be sufficient? Are there any other considerations?
I have a checkbox with a custom image for the button. I used the click delegate to perform an action whenever the button is clicked:
box.Click += { //do some stuff... }
This is working great.
However, now I have been given the requirement to add swipe detection to this checkbox (Sounds crazy but it does actually make sense for this app).
I added the swipe detection using the standard methods I am used to with normal Android in Java: I subclassed GestureDetector.SimpleOnGestureListener and also implemented View.IOnTouchListener.
I added the swipe detection to the checkbox as follows:
/*
SwipeListener implements View.IOnTouchListener
SwipeDetector is a subclass of GestureDetector.SimpleOnGestureListener
*/
SwipeListener listener = new SwipeListener(new GestureDetector(new SwipeDetector(this)));
box.SetOnTouchListener(listener);
When I do this, the swipe works great. But the click delegate no longer gets activated. I tried moving my code for the click to my SwipeDetector class, and that seemed to work.
But then I noticed that my checkbox was no longer getting its checked/unchecked state and so my custom image for it never changed.
I know this has got to be something simple, but I'm not seeing it... What is the proper way to have a click and a swipe on a view (checkbox) in Android/MonoDroid?
My guess without seeing your code is that you are returning true from OnTouch, meaning you have consumed the event and do not wish any further processing to occur using the event. Try returning false if you want the rest of the event to fire.
http://developer.android.com/reference/android/view/View.OnTouchListener.html
Im using Ext JS 4. I have a button inside a container. I want the container to receive mouseover, mouseout, and click events, but the button is causing the mouseover and mouseout event handlers to be called twice on the container. How can i disable the events on the child button?
I believe you are running to 4.0's new bubbleEvents behavior. Components now propagate some events to their parent containers. This happens in code, independent of DOM event bubbling, up the component hierarchy.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.container.Container.html
The best fix is to simply stop the event once you've handled it. That should prevent all bubbling, component or DOM. It is generally a good idea to do this for click events to make sure one and only one thing happens in response to a click, but I'm less certain it's appropriate for mouseover and mouseout.
panel.on('click', function(e) {
e.stopEvent();
// do your stuff
});
another fix you could try (I haven't) is to wipe bubbleEvents on the button.
Another, possibly less robust fix is to turn on event buffering:
el.on('click', this.onClick, this, {buffer: 10});
Buffering collapses duplicate events in a configurable time window into one and it's useful for smoothing out rapid fire or duplicate UI events, but I'm not sure how it plays with bubbling.
{
...
preventDefault: true,
...
}