Detect drag event on window - javascript

Im trying to figure this out like desperate but I couldn't come up with the right way.
Im trying to offer users the ability to change the background picture by drag-and-drop a picture into the browser. However, I can't be able to detect the drag events properly. when using
$(window).on 'dragenter', (e) =>
console.log e.target
$(window).on 'dragleave', (e) =>
console.log e.target
I always get the events triggered on individual DOM elements but never on the window/body itself, meaning if my DOM elements/container/wrapper dont cover the whole window, it does not work properly. I know it's possible since GMail can make it work somehow, but I seriously don't know what I'm doing wrong here.
Thanks!

If I'm interpreting your question correctly, you need to bind the events to $(document). Because of event propagation, everything should eventually bubble up to document. If you only want the dragging to work for a specific part of the page, try using classes/class selectors.

Related

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();
});
});

How to know which handler get fired in Javascript

Is there anyway I can figure out perhaps using firebug, when I click on a element the name(s)/body(s) of a function which get called.
for an example I want to know what are the Javascript functions that got
triggered when I press tweet button.
Please note that I am not talking about eventLog, breakpoints, or anything that requires to modify the source code.
I found out that visual event is an amazing tool which can help to visualize all the events attached with different elements.
I don't know about Firebug, but in Webkit Inspector, under the Scripts tab, under Breakpoints, then Event Listener Breakpoints, you can select different types of events in a hierarchical structure (Keyboard, Mouse, etc, and under those, each individual event).
When the event is triggered, the debugger will break.

Cannot listen document resize event

I want to listen the event whenever the document(body) size changed
which would caused by anything inside
(but you are assumed do not know what element caused the resize)
as the code below:
http://jsfiddle.net/marstone/7zaRT/8/
you can click the green area to change the div size, then the document.body resized.
however, the onresize event won't be fired.
I found that it only works when the window resizes, such as drag/maximum the browser window
any workaround? any help appreciated.
Resize events are available only on windows objects, as you said. You can use the jquery-resize plugin to add resize events on DOM elements, but be advice that they implement polling mechanisms to keep track of element's sizes. Due to that, you must always bind the event to the element you want to watch (delegate does not work as no real event is bubbled on the DOM).
So far I've used that plugin a couple of times, without any glitch. I'm not aware if other plugins implement this very same mechanism, but I'm somewhat sure that they all rely on a polling mechanism as this one.
This should do the trick:
$(document).bind('DOMSubtreeModified', function(e) {
alert("Bazinga!");
console.log(e);
​});​
Note however, that it tends to fire excessively, but I'll leave it to you to figure the how this could fit into your app.
http://jsfiddle.net/pratik136/7zaRT/12/

Detect if an HTML select element is expanded (without manually tracking state)

I'd like to detect if a drop down is expanded or not. I don't want to use extra event handlers for click/mouseover etc because the drop-downs are dynamic and for other reasons I can't use something like jQuery live. Basically I'd like something that can given an arbitrary select element (no other attached event handlers, classes, etc), can give a true/false answer on whether it is expanded or not.
For my specific application, I am handling mouse wheel events, but don't want to handle them when a drop down is open (which would override the browser default functionality). However, I still want to handle the mouse wheel events when the mouse has hovered over the select, but has not opened it.
I looked into this before, for similar reasons. I could never find a solution other than trying to track it manually which really doesn't work. There are several ways to open/close a select (drop down) such as Alt+Dn Arrow. An open select will close if the user clicks on something outside the browser. Trying to keep track of the state of the select is an exercise in futility. Unless someone else comes along with something I missed on my hunt, you'll have to code around it as elegantly as you can.
How about when it's got focus, even if it isn't expanded? You specifically ask for expanded because you don't want to override default browser behaviour, but the browser behaviour should be to scroll through the items when the item is focussed, even if it isn't expanded, so I would say you'd be better off detecting focus.
If you're okay with that, then you can certainly easily detect when a field has focus and when it loses it, by using the JQuery focus() and blur() methods, or focusin() and focusout().
http://api.jquery.com/focus/ and http://api.jquery.com/blur/
http://api.jquery.com/focusin/ and http://api.jquery.com/focusout/
Hope that helps.
Maybe you could do something like this:
$('#dropdown').live('click', function(){
//bind mousewheel here
});
$('#dropdown').live('change', function(){
//unbind mousewheel here
})

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.

Categories

Resources