Vue JS : right click event directive

<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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)