I have mousedown and mouseup events working well on desktop, and need to make similar work on mobile.
The working code on desktop is
<rect :x="xPos" :y="yPos" width="75"
class="arrowbox"
#mousedown="mousedown" #mouseup="mouseup"
/>
and after finding I got no reaction to mousedown on mobile (galaxy tab) I tried this:
<rect :x="xPos" :y="yPos" width="75"
class="arrowbox"
#mousedown="mousedown" #touchstart="mousedown"
#mouseup="mouseup" #touchend="mouseup"
/>
This gave the correct response for touchstarton the mobile, but both mouseup and touchend now fired so I had two touches where I wanted just one.
So then I tried removing the touchend handler. The mobile touchscreen now works as intended if the touch is done quickly. If I touch, hold for two seconds and then release, the touchend event doesn't appear to trigger. Is there a solution to this?
I have seen other similar posts but they relate to touchmove events, which I don't need.
Turns out that it's not a vue-related issue, it's just my inexperience of programming touch.
I needed to add a different handler for the touch events, and call preventDefault() before using the same code as for the mouse events.
function touchstart(e)
{
e.preventDefault();
mousedown();
}
Related
I'm trying to build a recording button where the user needs to keep pressing on the button to record, and then release the button when he wants to finish recording. Also, if the user releases its finger while outside of the button area, the recording gets cancelled.
I'm using a PanResponder to implement this behavior:
<View {...panResponder.panHandlers}>
<Button />
</View>
Everything works fine in the most cases. However, if the user taps somewhere else on the screen with another finger while recording (most often by inadvertance), then the PanResponder stops to capture the recording drag. The onResponderRelease method is not called.
I have no clue how to solve this. I want the recording drag to be resilient to extra touches.
I have tried catching and blocking any extra touch, if in recording state, inside the parent view but it does not work.
Any help is appreciated !
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!
In IOS7 application,Touch down event in bottom's area(being related to control center) is not triggered immediately.
down event is not triggered when touch down.
down event is triggered when touch move.
I know that it's not a bug and features in IOS7.
But, I believe there is some solutions for it.
I'm porting a Windows Phone 8 app to Windows 8 and I have a scenario where the user taps an item in my list control / grid view and I want to play an "activation" animation on the item, wait for the animation to complete, and then navigate away from the page.
On Windows Phone, I used DataTriggers in one case, and in another I used VisualTreeHelper to iterate through the view and find the VirtualizingStackPanel and then the actual item and then accessed it directly to invoke the storyboard...
Neither appears to work in this case and also seems that DataTriggers are not supported in winrt (DataTrigger in WinRT?).
I'd like to do the right thing here. I've seen suggestions that visual states can be used, but it is not clear how in this case.
Any help much appreciated.
Thanks
There are two ways I would go about this, though neither is particularly pretty.
Method A
Create a custom control that will act as each GridView item and place it in the GridView's ItemTemplate.
<GridView>
<GridView.ItemTemplate>
<DataTemplate>
<mynamespace:MyControl/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Then, in MyControl's constructor, attach a handler to the Tapped event, and in that handler you can perform your animation. The animation can be defined in MyControl.xaml. MyControl should also expose an event for when the animation is complete
public event EventHandler SelectedAnimationComplete;
and fire it when your custom storyboard completes. The page hosting the GridView can attach to MyControl's custom event to perform the navigation.
...
<mynamespace:MyControl SelectedAnimationComplete="selectedAnimationComplete"/>
...
Method B
On the GridView, set SelectionMode to None, IsItemClickEnabled to true, and attach a handler to the ItemClick event. Inside the handler, you can use
(sender as GridView).ItemContainerGenerator.ContainerFromItem(e.ClickedItem)
to get the GridViewItem, and then dig down the visual tree with VisualTreeHelper.GetChild. In your ItemTemplate, the root visual (likely a Grid) can have your animation placed in its Resources collection. Dig down the visual tree until you find the ItemTemplate's root grid, get the animation from its Resources collection, attach a completion handler to it, and run it. You can perform your navigation in the completion handler.
We are using the webview control in a WinRT XAML app. The problem we are facing is that MouseMove event is not passed to the html when using touch, while it is normally passed when using mouse.
When using touch the events passed during touch-move-release are:
MouseDown
MouseUp
while with mouse they are:
MouseDown
MouseMove
MouseUp
Is there a way to solve this problem?