Vue JS : right click event directive

treeview mouseevent vue.js
Praveen Kamath picture Praveen Kamath · Apr 14, 2016 · Viewed 27.8k times · Source

I know these vue event handlers:

@click : mouse left-click
@dblclick : mouse double click

What could be the handler/directive to detect a right-click? Need to implement a custom Context menu in Vue Tree view.

Answer

zxzak picture zxzak · Apr 14, 2016 
<button @contextmenu="handler($event)">r-click</button>

methods : {
    handler: function(e) {
        //do stuff
        e.preventDefault();
     }
}

@contextmenu will do the trick. The preventDefault is to avoid showing the default context menu.

Shorter, as indincated in the comment :

<button @contextmenu.prevent="handler">r-click</button>

Now the prevent modifier takes care preventing default behaviour.

Edit: For this to work with vue components, add a .native event modifier.

<custom @contextmenu.native="handler"></custom>

Related questions

Why is the TreeViewItem's MouseDoubleClick event being raised multiple times per double click?

XAML <TreeView Name="GroupView" ItemsSource="{Binding Documents}"> <TreeView.ItemContainerStyle> <Style TargetType="{x:Type TreeViewItem}"> <EventSetter Event="MouseDoubleClick" Handler="OnTreeNodeDoubleClick"/> </Style> </TreeView.ItemContainerStyle> .... </TreeView> Code-Behind private void …

Read More
adding child nodes in treeview

I'm new to C# and don't have any programming experience. But I've finish a C# basics. Now I would like to design a simple tree view by adding parent node and child node. I would like to add a second …

Read More
Data binding to SelectedItem in a WPF Treeview

How can I retrieve the item that is selected in a WPF-treeview? I want to do this in XAML, because I want to bind it. You might think that it is SelectedItem but apparently that does not exist is readonly …

Read More