In my React component I have a click event handler on the component's root element. I need to prevent this event bubbling when the user clicks a certain child element but also allow the double click to highlight the inner text as it would do usually.
I have tried to attach a click handler to the child element and call event.stopPropagation() which does prevent the parent click handler from firing but doing a double-click does not highlight the text.
Is there a way to do this?
Footnote: After writing this question I wonder if the only way is to use createTextRange()
Related
I have made a navbar, which holds a searchbar, and 3 icons.
On clicking these icons, a modal is rendered.
I wanted help with two things.
Closing the modals on outside clicks!, and
The hover element is slow because it has three states, every time it is called it re-renders the code from bottom to top. I wanted the hover to have one state assigned to one parent element. But on doing that, the hover effect for all three buttons gets activated at the same time.
Code is up on : https://codesandbox.io/s/unruffled-snowflake-he95w
Please feel free to edit the code and pass me the edited fork.
I have tried handleBlur, passing an event, and eventListener.
https://codesandbox.io/s/unruffled-snowflake-he95w
Expected - Modal rendered on screen should get disappeared on clicking outside the modal.
P.S - semantic UI icons are not rendering, but they are there. They will activate if you hover over them.
Credits - SVG close icon problem solved by Drew Reese.
Ah, I see. Your ToolBar is the controlling component, i.e. the state about whether or not each toolbar item is open is stored there. You need to pass a close handler to the children components so when a "close" button is clicked it is calling the callback the parent passed in.
Here is a fork of your sandbox where I pass in an onCloseClick callback to the calendar/picker thing that simply toggles that state value back to false to close it. The picker then just assigns that callback as its onClick handler for the contaning for the close button.
You can apply the same logic to the other two components.
Note: since the icons aren't rendering for me either I added some text to the buttons so they are easier to find/see.
In the GUI Designer I accidentally clicked on the Action Event button for a component I don't want to have a click event. Now I can't figure out how to get rid of it. Leaving the generated override method blank will prevent the click from triggering anything, but I don't even want the component (a List) to be clickable, just the list items themselves.
How do I do this?
Just delete the method from the state machine and save. It will remove it as if you never clicked that action event button.
I am working on a windows store application and I want to be able to drag between buttons so that the originally pressed button becomes deactivated and the newly "dragged onto" button becomes activated but I can't seem to get this to work.
I have 2 Buttons inside a StackPanel and the events I have on them are:
PointerPressed
PointerEntered
PointerReleased
PointerExited
PointerCanceled
PointerCaptureLost
PointerPressed and PointerEntered share the same event handler and the rest (the "deactivation" events) share the same event handler.
If I press one button my "activated" event handler is triggered and if I drag off it my "deactivated" event handler is triggered but if I then drag onto the second button the "activated" event handler isn't triggered again.
Strangely, if I start by dragging from off the StackPanel onto one of the buttons the "activated" event handler is triggered. I assume that it is something to do with the internal pointer management stuff but can't seem to find a workaround.
Does anyone know why this is happening and how I can get it to work how I want?
Thanks for your time.
Edit
Okay I've been researching some stuff and I've come across CapturePointer() and ReleasePointerCapture() but this seems to be broken - If I capture the pointer, when I take my finger off the screen, PointerReleased doesn't even get hit.
I've also realized why the "dragging from off the SP onto one of the buttons causes it to 'activate'" - this is because when a button is pressed it doesn't route its event but fires a Click event - meaning the same pointer cannot fire a PointerEntered event of another button, but if it starts outside a Button it will trigger PointerEntered.
This doesn't get me much further but it is a little extra info :)
The concept of Button is a bit unique in regard to mouse capture and how dragging away from it happens. In your scenario I'm not sure if the event model around Button will work correctly for you. On Button, when a pointer is depressed (mouse) it has capture until it is released. This is not the same for touch where a press and drag away is different because in touch there isn't any explicit capture unless you create it.
So what you are hitting is going to be a slight conflict between mouse/touch interactions anyway using Button -- using some other UI element (not sure if you have a styled button) should get you what you want.
I am playing around with mouse events and I realized there are a bunch of events but I have no idea when to use which one.
There is the Click event, MouseDown event, PreviewMouseDown, PreviewLeftButtonMouseDown, LeftButtonMouseDown.
What are the differences between then? They all do the same and that is notifying once mouse being pressed.
When shall I use which for what?
Click event : The user has clicked the element and released the button
MouseDown event: The user has pressed the mouse button (before releasing it). Click happens to be called if the user has both pressed and release it on the same element.
PreviewMouseDown : same as mousedown, except it is a tunnel event. It is called on parent function first, then tunneled to the child container while mousedown bubbles upwards (on child container first, and then on parent containers).
LeftButtonMouseDown : Called when left mouse button is pressed
PreviousLeftButtonMouseDown : I am not sure about this event. Could not find it. Did you mean PreviewLeftButtonMouseDown?
I have a button which launches a "modal dialog" - it just creates a transparent grid covering everything, with the "dialog" created on top of that.
However I have a strange issue - if I double/triple click the button really fast (or add some delay in the event code), the button click event is executed multiple times, creating multiple overlapping modal dialogs. If the first action in my event is to disable the button (IsEnabled=false) it seems to prevent this.
My guess is that Silverlight is being multithreaded with input - it is not only recording the second click in another thread (while the button's click event is running), but it is jumping the gun by evaluating which control should be the target before the previous event has finished executing. Even though that event alters what control is at those mouse coordinates, it doesn't matter.
Does anyone know anything about this behavoir, or a way around it? If I have something like a save window, where the user clicks a save button, a blocking grid ("Saving...") is placed up while it saves, and then the whole "window" is closed, I'd like to avoid the user being able to queue up multiple save event clicks (this could lead to unpredictable program behavoir).
If you've ever worked with WinForms or WPF, this is expected behavior. Your button is broadcasting its Click event until your modal dialog covers it up. Unfortunately, there is some amount of time between your first click and when the modal dialog covers the button which allows multiple clicks to the original button.
You have two solution choices:
Disable the button after the first click and then re-enable after the modal dialog returns. You've already mentioned that this works.
Write code in the Event Handler of the button to determine if a modal dialog is already being displayed. This way, you're putting the responsibility in one location rather than splitting it up (disabling and re-enabling the button). This would be my preferred solution.
I think what you're seeing is the behaviour of Silverlight's routed events.
You can set the Handled property of the event arguments to true to prevent the event from bubbling.