How to ignore right click on Easel JS - javascript

I am working on Easel JS and came across one issue.
If I am adding Events to one easelJs element then how can I ignore the right-click and only listen to left-click?
Click should work on a primary key but it is also working for other keys also.
I have come across one scenario where pressUp of left-clicking is getting missed and that is creating an issue.
steps are as follows:
left mouseDown on the object.
right mouseDown on the same object.
right pressUp on the object.
If we follow this order, left pressUp is getting missed it is not getting fired nor it is present after that point. It's like it totally vanishes as if it never existed.
Can anyone please help me with this? Thank you in advance!!

I am kind confused with your question, but I think a easy way to ignore the right click event is to use event.preventDefault for contextmenu.
The preventDefault() method of the Event interface tells the user
agent that if the event does not get explicitly handled, its default
action should not be taken as it normally would be.
For example (you may not able to show the right click menu in the example):
document.addEventListener('contextmenu', function() {
event.preventDefault();
return false;
})

Related

Angular issue with Drag and Drop

I've a simple list made of mat-card. I would like to highlight the mat-card when dragging a file over and do something on the file drop, but I have two main issues:
Sometimes, when dragging too fast, the status of the mat-card is not correctly updated. so in some cases I have multiple cards highligthed.
The e.preventDefault() on drop event does nothing. The file is open in the browser, which is not the expected behaviour.
I tried so many things, even manually add/remove event listeners, but nothing worked. Hope someone will help :)
Here you can find a demo made in stackblitz so it can be easier to debug:
https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted
Update:
Using Angular v5 and Angular Material 2
After some poking around, the dragover event needs to be prevented as well as the drop event in order to stop the browser from opening the file. To fix the class being applied multiple times, I fixed this by using ngClass instead of the ngIf and it seems to work more consistently. Check out this stackblitz for a demo.
For the first issue, this is because of Angular lifecycle that isn't fast enough. Either you stop using Angular's context to update your elements, or you find another way of notifying the user that he is above the application.
For the second issue, add an host listener to the window:dragover event to prevent the default :
#HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
event.preventDefault();
}
Stackblitz

How to stop event propagation/bubbling in custom events

I'm using an module-project from Github on my Angular project, that lets me resize my DOM elements, which are drawn on top of a div, that works as a draw-board.
To shape my first elements, who are simple rectangles, by the way, i am using a mouseDown - mouseMove - mouseUp combination Event Listener, and then when i decide to resize one i hover over the edges and resize it.
Problem is that on the resizing event, which is a combination of resizestart - resizing - resizeend, although i know that the module is using and mouseDown-Move-Up Event listener and emits the events mentioned before, i cannot get the MouseEvent created, and instead i get the ResizeEvent, which doesn't have a stopPropagation() method, so calling it as it is gives an error(that it's not a function).
I need to stop Propagation, because when i resize my Elements on my draw-board the click event gets bubbled to the immediate parent element, and as a consequence i resize an existing element and create a new rectangle at the same time.
On top of that, the ResizeEvent doesn't even include an "event.target"-like property which makes matters worse...
So, i was wondering how can i work around this one??
I was thinking using #HostListeners, but wouldn't the code executed in that directive get mixed up with the Resizable directive(the module is declared as a directive)??
And messing around with the Resizable-module files doesn't sound like a good idea, since if anyone wants to use my module will have to download my tampered files of the resizable project...
Answer to your question is :
event.preventDefault() will stop the default functionality.
I think this may solve your issue.
The event.preventDefault() method stops the default action of an element from happening.
For example:
Prevent a submit button from submitting a form
Prevent a link from following the URL
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});

Understand the flow of touch event in HTML5 , JavaScript

In my project when we are touching one button another button is getting selected. I can not share the code here. But I am trying to understand the flow of the touch event.
My understanding is :
We click a button
Browser detects the event and let the HTML5 know.
HTML5 raises that as an event (like click)
HTML5 passes that to the JavaScript's event handlers.
So may be the page.x and page.y co-ordinates detected by the browser are wrong.
Kindly let me know if my understanding is wrong of the flow of touch event.
Check whether are you using same class for the buttons.
This may also due to event may get bubbled up this can be prevented by using event.stopPropagation().
Check this link https://api.jquery.com/event.stoppropagation/.
This is what i can suggest, if not please post a detail explanation.

Javascript how do I find what function call resulted in a specific UI event?

I want to find out what triggered an event. Namely, the notification bar on this site stackoverflow.com (the bar that tells you when someone has posted an answer to a question you're writing an answer on. It scrolls down slowly from the top and provides a really nice UI for user notifications. I've seen it work on just about ever page.
I imagine it working something (I need to find its name):
special_notification( message );
In the abstract, how do I go about finding out what the call (function name and arguments) looks like that generates that effect when all of the javascript is minified, and I have no idea what include provided it.
Download and install firebug in Firefox.
Go to the URL you're interested in, and open firebug. You might need to reload the page.
Now click on the little arrow icon on the top right hand side of firebug. This will let you highlight any element on the page and provide the corresponding HTML to that element.
Now that you have the id of the element, you should be able to find it in the javascript code. Even if it's minified, the name needs to correspond the DOM name.
To read minified js, you can use a tool like http://jsbeautifier.org.
Regarding your other concern, you want to listen to all the events on a page and know what triggered them and what is the code executed? is that correct?
Update:
There is no way to listen to all the events. If you really need to, you can set up listeners for every event, but you will still miss the custom events, which i guess are what you are after.
I'd suggest you inspect the code using Firebug to learn how the events are used in each case.
You can also listen to all the DOM Events, in jQuery you will do:
$('body').bind('DOMSubtreeModified', function(e){
console.log('DOMSubtreeModified triggered');
console.log(e); //Firebug console.
});
Where e will hold the event information.
Hope that makes sense.

Call a KeyDown Event

All I need is to be able to click a button and have it do the KeyDown event for Enter, I've tired doing KeyDownCheck(13); and similar things, and I can get into the KeyDown event, but I can't get it to recognize that I want Enter, and it doesn't go to any specific key.
All Enter does is call another function, but when I try to call the function from a button it seems to call a different function which puts me back. Ironically, I had the same problem in the Enter event, but I fixed it with a return false; statement and I don't know how to do that for a button, so I was just going to call the KeyDown.
Is there a specific way to put this in? Thanks in advance
Notice, that key events are heavily browser specific. It is no fun at all really especially with none alphanumeric keys like 'enter'.
See here for a full run-down on all the issues.
See here for a test script, that helps you to determine the results your browser gives you.

Categories

Resources