I'm using the fantastic svg-pan-zoom plugin (https://github.com/ariutta/svg-pan-zoom) to pan/zoom my svg element, I want to enable the mouse drag to let use move it.
I have a single elemen inside my svg where I want to prevent the drag because it has a click event and when the user clicks on it sometimes it drag the svg element.
The requested behavior is to drag as standard except when the mouse is down on this element.
I already try with event.stopPropagation() and event.preventDefault() but seems that svg-pan-zoom plugin has its own event management.
How can I prevent the mouse drag?
You can have 2 layers (if you don't need to pan/zoom that element).
Or you can still keep all elements zoomed but only some of them listening for events. Just place everything you want to listen for events in one SVG Group element <g> and set it to listen for events.
Last solution would be to override default events for click/drag and write your own handlers.
I would recommend option 1 if you don't need your element to be zoomed, or option 2 otherwise.
Related
I have to scroll right in cypress for a specific view part. Sometimes it automatically detect, but sometimes after scroll only it detect the button. Scrollbar has no unique ID. What is the solution for this scenario?
I tried cy.scroll(500,0) but this dont work
You can get the element then use .scrollIntoView() chained to the returned element.
cy.get('#uniqueId')
.scrollIntoView()
// now it will be in current viewport
I have a user control with a bunch of buttons behind a scroll viewer that has a grid with a bunch of rows in it. The first row is empty. The buttons in user control need to respond to tap/click when not obscured by scroll viewer's content. My problem is that the scroll viewer caches the tap event and it is not passed to the user control because it is a sibling to the scroll viewer. I would like to somehow pass/propagate the tap event to the user control to get the buttons working. I can't find a good solution to this issue because there seems to be no RaiseEvent(e) method on UI elements in uwp. Due to specific requirements, the whole page needs to react to scroll and the buttons are required to be behind the scroll viewer content. Does anyone know if it is possible to pass the whole event to another element or somehow allow for both controls to handle it? Thanks in advance.
I have several display objects in createjs and event using easeljs i want to prevent from mouse and touch event passing through them.
i want like a easy one liner like .mouseEnabled or .mouseChildren is there something will will prevent any other interaction for the objcts below this. i can try adding all events to a backdrop movieclip which tint background color and prevent default and stopPropogation will that help?
so how to i prevent from any type of interaction taking place in canvas just by placing a displayobject that's like wall which will not allow the other displayobjects from getting click, mouseover or touch events.
You can add obj.mouseEnabled= obj.mouseChildren = false; to any you don't want to receive events.
If you just want to block events with a child on top, simply add a mouse handler to it.
cover.on("click", function(){});
You don't need stopPropagation, since that will only prevent events from bubbling in the current hierarchy (ie, surfacing an event to its direct parent). Events do not "pass through" objects that have mouse handlers on them.
Hope that helps!
I would like to have a small menu that closes if the user interacts with any other component. For example if the user tries to scroll or interact with any of the content in a scrollview behind the menu (see the image below for reference).
I have two ideas for how this might be achieved:
A transparent layer behind the menu with an absolute position and dimensions matching the device. If this layer registers a touch event the menu can be dismissed. The problem with this is that from the users perspective the touch event was totally ignored. So for this to work well I would need to be able to still pass the touch event through the absolute layer to the content behind it.
Add callbacks to every component that could be interacted with to notify the menu that it should close. This option seems like it would be very messy and because of the large number of components in my use case it is not practical to implement and maintain.
Is there an other proper way to solve this problem? Can any of the issues I raised with the ideas above be resolved or mitigated?
Wrap your view with a TouchableWithoutFeedback component and provide it a onPress callback that hides the menu if it's open. Depending on how top-level the 'expand' icon is, you may want to track the menu's visibility in redux and dispatch an action onPress to track globally.
I have a StackPane to which I add child panes. Each child has MouseEvent handlers to drag it around the StackPane. Works fine. Then I also want to be able to resize that pane. So I added 8 small 'drag' panes to the child in the appropriate places each with its own clicked/drag handlers.
The problem: once a 'drag' pane mouse event fires, I need to set an anchor point for the parent pane. This anchor point will depend on which 'drag' pane was clicked. How do I identify which pane was clicked in the handler? I suspect I am missing something very obvious, but I cannot see it (Google provides no answers).
I tried using the hashcode, but no luck.
Finally realised what the solution was after Googling a different issue. I had tried event.getSource(), but couldn't relate the returned object to my pane. The solution is simply to cast it (Panel)event.getSource() it and then it's all go! Talking about dim!