Does anyone know of a method to trigger a click on an element with mootools at the dom level?
foo.fireEvent('click') will, for instance, only fire events added by mootools, which is not very helpful for this particular application.
Here's a fiddle with a toy example - you can see that clicking the top button will fire off both event handler functions, while trying to use the lower button to trigger a click will only fire off the 2nd function.
http://jsfiddle.net/Tc4Bv/
Any help would be appreciated - thanks!
modern browsers have an Element.click method available, so you could try something like this:
Element.implement({
synteticClick: function() {
var click = 'click';
(this[click] && !(this[click]())) || this.dispatchEvent(new Event(click));
return this;
}
});
http://jsfiddle.net/dimitar/LUPYK/
works/tested in latest FF, Chrome, also IE9 and IE9 in IE7 mode (compat).
keep in mind that the event object may be basic, i.e. lacking clientX/Y etc - so it very much depends on what you do at the other side...
Related
I am using kinetic-v4.3.0-beta2.js
I want to handle mobile touch event on group for ios & android.
I am binding event such as following
group.on('touchstart', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
I tried 'touchend', 'touchstart' and 'tap'
Got partial success in "Tap" but in that case, shape is draggable so tap event is not properly fire because object will move from it's place.
but if shape is not draggable then it will work fine.
I tried 'touchend' and 'touchstart' event also but popup menu is close after event fire in iOs and android as I am opening Jquery Mobile Popup by Touching group!
The popup menu will only open for 2-3 seconds when the touchstart event fired.
Anyone faced the same problem with kinetic JS Mobile events? How to handle only "Click" or "Touch" event with it.
I checked this http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ for reference but had no luck!
I am developing application with Phonegap + JQM + Kinetics JS
Thanks in advance!
Keep in mind that your application is running inside a webview. This is why you've got these 2/3 seconds of delay on touch/click event.
This is why in all my PhoneGap dev, I use Fastclick.js. FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
You can find it here https://github.com/ftlabs/fastclick.
It's easy to use (if you're using jQuery) :
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
I made a jsfiddle for you to test out the click/touch events.
From what I understand, you have a Kinetic.Group node that is draggable but you want to open up a popup using jquery mobile.
You are right that when you drag an object, the tap event does not fire. But you said otherwise the tap event works fine if the shape is not draggable. This leads me to believe:
You want a popup on "tap"
You want a popup on "dragend"
If so, all you need is to use both events like this:
group.on('tap dragend', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
Please let me know if my assumptions are wrong, and I can work with you to get the right solution. I am guessing when you want to popup, so if you let me know exactly when you want a popup to occur that will help a lot.
You might want to also look into using evt.cancelBubble = true; http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/
I have events working fine in Chrome and IE10 for Google Maps (APIv3) and RichMarkers. Problem is, the same code borks on Firefox19 with event undefined. So, this code works on Chrome and IE10...
google.maps.event.addListener( marker, 'mouseover', function(event) {
console.log(event);
});
But not on Firefox. Interestingly, attaching a CLICK event to the map object does work as you'd expect. The event object is visible within the called function in all browsers. So, does anyone have any idea as to how to fix this? I really need to pass the event object onwards as I have funcs that use it for positioning and so on.
Normally, I'd get around this using jQuery to attach the events, but this is not an option here.
Cheers
CT
There is no mouseover-event : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
Apply the mouseover-event to the content of the marker(the content must be a node)
If certain conditions are met when an infoWindow is closed, I want to prevent the default close event that is fired. Is it possible to achieve that? I tried a number of things like:
Stopping event propagation
returning false from the callback method
there aren't any methods/properties exposed by the infoWindow either that prevent close.
Please let me know if this is possible.
The InfoWindow doesn't really provide a way to step event propagation. I don't know if it could work for you, but there is an InfoBox Utility Library that does give you a great deal more of control oven its behavior. Specific to your question, the InfoBoxOptionsapi-doc object includes the property:
enableEventPropagation, a boolean, that will allow you to control whether the InfoBox will: propagate mousedown, click, dblclick, and contextmenu events in the InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set this property to true if the InfoBox is being used as a map label. iPhone note: This property setting has no effect; events are always propagated.
The only thing you can do is catch the closeclick event which leads you nowhere.
I have hacked something together once, for a one-off solution, that might or might not work for you: I have identified a way to get to the x-mark that the user clicks to close, and removed that. The user can't close the infoWindow. At all. You still can, by calling .close().
WARNING! THIS IS A HACK
var a=document.getElementById('map_canvas');
var b=a.getElementsByTagName('img');
var i, j=b.length;
for (i=0; i<j; i++) {
if(b[i].src.match('imgs8.png')){
if(b[i].style.left=='-18px') {
c=b[i].parentElement.parentElement;
console.log(c);
if(c.innerText.match("Map data")) {
console.log('no');
} else {
b[i].parentElement.removeChild(b[i]);
}
}
}
}
Now. If you store a reference to the [x] mark, you could even turn it on and off at will.
EDIT:
A demonstration of this hack
You could always listen for the close event and then throw a javascript error to keep it from closing. Ex:
google.maps.event.addListener(my_infoWindow, 'closeclick', function(e){
// Throw an error to stop the close
throw "stop close";
})
I'm trying to get file drag and drop in firefox and am taking baby steps to start. Right now, I'm just trying to drag some files in to a dropzone and get a list of the files dropped. At this point, I don't want to do anything with the files yet.
When I drag a file (in this case an image, but the same thing happens regardless of the file type) from finder to the dropzone, I can see the dragenter and dragexit events firing. When I drop the file in to the dropzone, the drop event is not firing. What happens instead is that the browser opens the image on it's own (e.g, the address is showing file://path/to/my/image.png).
My javascript looks like this:
dropbox = document.getElementById("standard_file_dropzone");
dropbox.addEventListener("dragenter", function(){console.log('standard enter');}, false);
dropbox.addEventListener("dragexit", function(){console.log('standard exit');}, false);
dropbox.addEventListener("dragover", $.noop, false);
dropbox.addEventListener("drop", function ( event ) {
console.log('standard dropped');
event.stopPropagation();
event.preventDefault();
if(( typeof event.dataTransfer.files !== 'undefined' ) &&
( event.dataTransfer.files.length > 0 )) {
console.dir( event.dataTransfer.files );
}
return false;
}, false);
My HTML looks like this:
<div id="standard_file_dropzone" style="height:150px; width:150px; border:solid;">
Standard Drop Files Here
</div>
So I'm wondering what I'm doing wrong here? There doesn't seem to be anything (at least obvious to me) wrong with the above code. The dragenter/exit events are firing, why isn't the drop event? Why is the browser trying to open the file itself?
One thing to note, when I open my page in Chrome, this is working as expected so this is a Firefox specific issue.
thnx,
Christoph
The issue was using $.noop as the dragover handler. Replacing it with a function which actually stops propagation and the bubbling, it started working as expected.
I'm such an idiot sometimes. :p
Is it possible to extend the addEvent function in mootools to do something and also calls the normal addEvent method? Or if someone has a better way to do what I need I'm all years.
I have different 'click' handlers depending on which page I'm on the site. Also, there might be more than one on each page. I want to have every click on the page execute a piece of code, besides doing whatever that click listener will do. Adding that two lines on each of the handlers, would be a PITA to say the least, so I thought about overriding the addEvent that every time I add a 'click' listener it will create a new function executing the code and then calling the function.
Any idea how I could do it?
Whereas this is not impossible, it's a questionable practice--changing mootools internal apis. Unless you are well versed with mootools and follow dev direction on github and know your change won't break future compatibility, I would recommend against it.
The way I see it, you have two routes:
make a new Element method via implement that does your logic. eg: Element.addMyEvent that does your thing, then calls the normal element.addEvent after. this is preferable and has no real adverse effects (see above)
change the prototype directly. means you don't get to refactor any code and it will just work. this can mean others that get to work with your code will have difficulties following it as well as difficulties tracing/troubleshooting- think, somebody who knows mootools and the standard addEvent behaviour won't even think to check the prototypes if they get problems.
mootools 2.0 coming will likely INVALIDATE method 2 above if mootools moves away from Element.prototype modification in favour of a wrapper (for compatibility with other frameworks). Go back to method 1 :)
I think solution 1 is better and obvious.
as for 2: http://jsfiddle.net/dimitar/aTukP/
(function() {
// setup a proxy via the Element prototype.
var oldProto = Element.prototype.addEvent;
// you really need [Element, Document, Window] but this is fine.
Element.prototype.addEvent = function(type, fn, internal){
console.log("added " + type, this); // add new logic here. 'this' == element.
oldProto.apply(this, arguments);
};
})();
document.id("foo").addEvent("click", function(e) {
e.stop();
console.log("clicked");
console.log(e);
});
it is that simple. keep in mind Element.events also should go to document and window. also, this won't change the Events class mixin, for that you need to refactor Events.addEvent instead.