I am using vue 2.1.10.
I am using #contextmenu event to detect on right click events.
But I want to detect right click up and down events.
How can I do that?
As of v2.2, you can listen for right mouse click events using the right modifier (and prevent the default behavior of the contextmenu event by using the prevent modifier):
<button
#mousedown.right="mousedown"
#mouseup.right="mouseup"
#contextmenu.prevent
>
Click Me
</button>
Here's a working fiddle.
If you aren't using v2.2 or above, you can manually check for the right mouse click using the which property of the click event instead:
<button
#mousedown="mousedown"
#mouseup="mouseup"
#contextmenu.prevent
>
Click Me
</button>
methods: {
mousedown(event) {
if (event.which === 3) {
console.log("Right mouse down");
}
},
mouseup(event) {
if (event.which === 3) {
console.log("Right mouse up");
}
}
}
Here's a working fiddle.
Related
I'm trying to use PrimeNg TabView component along with confirmDialog unsuccessfully
I am able to show this confirm dialog but it appears after user switch to target tab panel which is wrong.
<p-tabView (onChange)="handleChange($event)" [(activeIndex)]="index">...</p-tabView>
handleChange(e) {
this.confirmationService.confirm({
message: 'There are unsaved changes, do you want to proceed?',
accept: () => {
this.index = e.index;
},
reject:() =>{ }
});
}
Do you have an idea on how to prevent or allow tab change using confirm dialog ?
Thanks
there is no official way to prevent change to another tab by press on that tab , but 😅 there is a work around it first we need to prevent the tab change by tab click,
1️⃣ we need to set the header by ng-template or it called a custom header
template
<p-tabPanel >
<ng-template pTemplate="header">
<div (click)="handleChange($event,0)">
Godfather I
</div>
</ng-template>
.....
</p-tabPanel>
2️⃣ we bind a click event to the new header text and by using mouse event stopPropagation method we can prevent the change 👌,now we can control the change by confirm result but you need to pass the current tab index, that why I add another parameter to handleChange
component
handleChange(e:MouseEvent,tabIndex:number) {
e.stopPropagation();
if (this.index == tabIndex){
return;
}
// console.log(tabIndex)
this.confirmationService.confirm({
message: "There are unsaved changes, do you want to proceed?",
accept: () => {
this.index = tabIndex;
},
reject: () => {}
});
}
the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again
demo 🚀🚀
i was using vue-mapbox and wanted to get an event every time theres a zoom change, is that possible with vue-mapbox? or if i can use any other alternative options?
or as an alternative if theres a click event for the <MglNavigationControl /> component which controls the zoom?
it tried adding #click on the <MglNavigationControl #click="click" /> but it doesnt work
method : {
click(){
alert('zoom button clicked')
}
}
AFAIK there's no event or action exposed in vue-mapbox for working with zoom events. You've to work around this by doing something like this:
<VueMapbox
mapStyle="mapbox://styles/mapbox/streets-v9"
accessToken="<token>"
#load="onMapLoad"
/>
methods: {
onMapLoad({ map }) {
map.on("zoomend", e => {
alert('Zoom end: ' + e.target.getZoom());
});
}
}
I have disabled right click by adding the following code. However, when I navigate from one page to other, during that window of time, on right click, the right click menu is opening.
document.onmousedown = function (event)
{
event = (event || window.event);
if (event.button == 2 )
{
alert("right click");
}
}
You can use oncontextmenu for this:
document.oncontextmenu = function () {return false;}
This can happen for case if document.onmousedown = function (event) isn't yet executed for some reason. Among reasons can be errors in java script or browser yet didn't execute document.onmousedown = function (event) because it is in process of executing some other javascript code.
Another proposal for consideration can be another way of disabling:
<body oncontextmenu="return false">
I am using getItemTextTpl to add a checkbox component to a nested list - I would also like to be able to override the default tap event so that when the checkbox is checked a popup message shows and the list does not advance to the next items. Please see below for my configuration - I am able to capture the checkbox check event but do not no how to override the default behavior for nestedlist. Thanks for your help and please let me know if I can clarify any details - if it helps I am using sencha architect
Nestedlist config:
getItemTextTpl: function(recordnode) {
return '<table width="100%"><row>' +
'<tr><td width="100%" align="left" width="100%" valign="bottom"><div class="view"><input type="checkbox" <tpl if="done">checked</tpl> /> {name}</td></row></table>';
}
Controller:
onNestedlistInitialize: function(component, options) {
// setup taskList to listen on the tap on the checkbox and show a popup window
component.element.on({
tap: function(e, el) {
console.log('checkbox tapped');
//need to override nestedlist tap event and show popup message
}
});
To prevent the list from switching to the next card you need to override the activeitemchange like so :
var nestedList = Ext.create('Ext.NestedList', {
...
listeners:{
activeitemchange:function(){
if(...){ // Check if you checkbox is checked or not
return false; // return false prevent the nestedlist from switching to the next view
}
}
}
});
Sencha Touch 1.1.1 --
Is there a way to set up a listener to listen for click events on the Back button of a NestedList? I can only find examples of how to set up for clicks on the 'body' or 'el' element. How would you be more specific and target the NestedList's back button?
Many Thanks
Code so far
MyTest.views.Justacard = Ext.extend(Ext.NestedList, {
title: "The Title",
...
listeners: {
click: {
element: 'el', // ANYTHING HERE TO TARGET THE BACK BUTTON?
fn: function(){
// do action
}
}
}
});
Ext.reg('justacard', MyTest.views.Justacard);
On a side note: because the NestedList component adds the back button automatically, there's no opportuity to configure it and add a handler (I think).
PS: adding the following code (below title: for example) allows me to respond to the Back button clicks - however, it also removes all the normal Back button functionality and the NestedList no longer slides back to the parent list.
onBackTap: function() {
alert('boo');
}
Turning into a proper 'lumpy carpet' scenario ; )
Try
MyTest.views.Justacard = Ext.extend(Ext.NestedList, {
title: "The Title",
...
listeners: {
back: function() {
alert('back?');
}
}
});
or
onBackTap: function() {
this.callParent(arguments);
alert('boo');
}
P.S. Sorry, I didn't test this (just looked at sources)