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();
});
});
Related
Hi I'm developing my view in JS and I'm stuck in binding a click handler for my horizontal layout element. I've tried using Jquery
$("#myHorizontalLayout").bind("click",function(){window.alert()});
Which didn't work then I tried using attachPress with the element which obviously didn't exist. Please help.
Update:
The JS view is the default view of the application.
When on/bind does not work, it could be that the HTML of the control has actually not been created yet at this point in time. But even if you delay the binding, the re-rendering (re-creation of the HTML after changes) would remove your listener, at least when bound on the control itself.
A proper way of doing this is using the generic attachBrowserEvent function available on every control (here: on the layout) which internally handles all the rendering/rerendering stuff, see this example:
http://jsbin.com/hijutunefi/1/edit?html,output
attachBrowserEvent works for any browser event, as it attaches a new browser event listener to the root node of the control. For the most common browser events UI5 does event delegation, so for the "click" event and several others addEventDelegate can also be used, as pointed out by aborjinik.
Alternatively, listening on the <body> level with normal jQuery mechanisms should in general also work.
Which didn't work then I tried using attachPress with the element which obviously didn't exist. Please help.
Does this means that the element on which you are attaching event handler doesn't exists at this point? If this is the case you can hook the handler to some container, upper in the DOM hierarchy which you are sure that exists and filter the click events.
Example:
$("body").on("click", "#myHorizontalLayout", function(){
alert("Hey, you!");
});
As of jQuery 1.7, the .on() method is the preferred method for
attaching event handlers to a document. For earlier versions, the
.bind() method is used for attaching an event handler directly to
elements. Handlers are attached to the currently selected elements in
the jQuery object, so those elements must exist at the point the call
to .bind() occurs.
Reference here
So try replacing bind with on and let me know if it works or not.
In short
Is there a way in which, when listening to a native event, I can detect if the event was somehow used by CKEditor before it propagated to my listener, or prevent it from propagating at all?
Use case
I'm listening to the keyup event using jQuery, to detect when escape is pressed. When it is, the user is prompted if they want to discard changes, and the CKEditor instance is destroyed and its element removed from the DOM.
$('body').on('keyup', function(e){
if(e.which==27){
CKEDITOR.instances.myDiv.destroy();
$('#myDiv').remove();
}
});
The problem here is that CKEditor allows the user to interact with certain UI elements using the escape key. For instance to close a dialog window or drop-down list.
So my event should only execute its code if CKEditor did not already use the event to close a UI element of its own.
Attempt
I tried to listen to the dialogShow and dialogHide events to detect if a dialog window is open, and my action should thus be ignored. This didn't work for two reasons:
CKEditor handles the event first, so by the time the event propagates to my listener, no dialog windows are open and my code is executed.
Even if it would work, it wouldn't for drop-down lists as they do not trigger the dialog* events.
Ideas
I don't know enough about the workings of CKEditor to come up with a solution, but I think I'm looking for something along the lines of:
A setting in CKEditor to prevent event propagation: CKEDITOR.instances[0].noEventPropagation = true
An indication in the original event object: if(event.CKEditorWasHere){/*do nothing*/}
A plugin providing functionality that I can use.
Worst case scenario: A setTimeout in the dialogHide event which I'll use to suppress my own events for a short time.
So
Maybe I'm completely overlooking something. This seems to me like a common problem which should have a simple solution.
Thanks for your time.
I have some draggable KineticJS image objects on a layer and I want to execute my own handler on the 'touchend' event. Sounds simple enough! I have added handlers to each of my images objects, for example:
toyKinObj.on('touchend', openBoxContactEnded);
However because the 'draggable' property is 'true' for the objects, it seems that KineticJS is also calling its built-in _touchend() handler in addition to my own handler code.
My code does things stage.clear() and e.shape.setDraggable(false) but these object modifications seem to interfere with the built-in _touchend() handler. Depending on which version of my code I'm using, I have seen the KineticJS _handleEvent() handler fail because the event has no longer exists, or images on the layer I cleared later re-appear (the latter might occur because I KineticJS is attempting to re-draw the stage/layers as part of it's event handling, even though I wanted to clear the stage).
To make matters a bit more complicated, it also seems that my own handler code is being called in the middle of the built-in KineticJS _touchend() handler code, which I'm sure doesn't help.
So my question is: instead of having my own handler, can I extend the _touchend() handler to execute my code after the main _touchend() code? Or somehow ensure that my code doesn't execute until _touchend() is done? i.e. control the order of handler execution?
I could hack _touchend() to dispatch a user-defined event when it's finished, to trigger my own code, or I could forget about the KineticJS touch events and implement my own drag/drop handlers, but I'm sure I'm just missing something and there's an easier way.
I think what you are looking for is canceling event propagation, try:
shape.on('touched', function(evt) {
evt.cancelBubble = true;
});
More info: http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/
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/
I'm developing a touchscreen application that, aside from everything else, records the amount of times the screen is used so that the user can be reminded to clean the screen after a predefined number of clicks.
I've got the click functions written nicely, all I need now is make sure the function is called on a click.
I imagine $('*').click(function() { //do something }); would accomplish my goal, but is that the best way? Also, would that overwrite other click functions assigned to the elements?
It would add, not override, but a better solution would be this:
$(document).click(function() {
//do something
});
Since clicks bubble, just listen up at the document level with one event instead of creating events on every element beneath. For the override part...you can add as many handlers as you want, they will just execute in the order they were bound.
The best way is to assign the event handler to document itself. The events bubble and document can catch them all, while still retaining the origin of the event.