We Keep Coding

Difference between .click() and creating a mouse event?

So I am trying to work out the differences between
link.click()
and
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);
As far as I can tell these should be the same things (however working with my jsfiddle example of exporting a csv from a URI this is not the case as they perform differently from browser to browser)
Using .click() with firefox the popup to download the csv will not show (it will in chrome)
see example -> http://jsfiddle.net/a5E9m/23/
Where as using the Mouse events it will
see example -> http://jsfiddle.net/a5E9m/25/

I think that Firefox has restrictions around the click function on an <a> element. See here. Whereas when you wire up the mouse event yourself, you are manually adding the click wiring. Also, see here and here.
Also, as Boris Zbarsky pointed out in the comments, the <a> element does not have a click function on it in the spec.

How to avoid Chrome dragging content

I'm creating a simple javacript window manager with basic functions like all windows managers(moving, resizing, depth-sorting, etc).
I'm using events like mousedown and mouseup to know when to move the window or not.
However, sometimes, when I try to move the window, chrome hooks up on it and drags the "content"(I don't know the right word to use here, just imagine you're dragging an image from the browser to your desktop), like the image below.
(My cursor is there, it just doesn't appear on the screenshot).
Whenever this happens, chrome just simply don't trigger the mouseup event when i release the button, so the windows keeps following the mouse until I click again.
Is there any workaround to make chrome don't activate its dragging system?
Thanks.

Here's a link to another question very similar to yours. It seems to have a variety of answers. Disable Drag and Drop on HTML elements?

Try adding the draggable="false" attribute to relevant elements. By default <img> and <a> elements can be dragged, as can selected text (not much you can do about that one).
Alternatively, try adding ondragstart="return false;" to the document.

Problem with IE in grab/drag scenario

I have a project where users can interact with a carousel like slide show, and drag between slides instead of using an arrow/number navigation. JS is based on the following plug in:
http://nooshu.com/explore/jquery-iphone-animation/
The issue is, in IE, if a user grabs inside the carousel and the mouse leaves the container element, the UI freaks out. If you play around with it, you'll see what I mean.
Is there a way to tell IE to handle the drag/click event to mimic firefox and chrome? I'm sure this is a common problem with IE and UI design.
Help!
EDIT: This also happens in Chrome. Firefox is the only browser that handles this in an intuitive way.

When, in IE, the mouse leaves the square, it's not releasing the mousedown event. So even when you let the button go, the plugin still thinks that the mouse is down.
Is it possible then that you wrap the plugin in say a div and on the div have a mouseleave event and force the plugin to execute mouseup?
I think you should be able to use the jQuery keyword "trigger" to do it.

Disable PrettyPhoto in code

How can I disable PrettyPhoto after it has been enabled?
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();
}
$("#disablePrettyphoto").click(function (e) {
$("a[rel^='prettyPhoto']").KILLPRETTYPHOTO();
});
On a page with images, where I use Prettyphoto, I need to do some drag and drop action on the same images. Doing this with prettyPhoto enabled is not nice, as it fires the popups when I am dragging and dropping (as it should). So when I enable drag and drop, I want to disable PrettyPhoto and enable it again when I disable drag and drop.

I've had this problem with prettyPhoto as well. I've actually started using the api to have more control over the plugin.
You can, however, use unbind() to remove all click handlers, then do your drag/drop stuff, then add prettyPhoto again. Take a look at this question (Best way to remove an event handler in jQuery?), this should help.

To disable prettyPhoto, unbind the click attribute:
$("a[rel^='prettyPhoto']").unbind('click');
After that, reinitializing prettyPhoto works well for me.
If you don't want to reenable it later, you can destroy it completely by removing rel attribute:
$("a[rel^='prettyPhoto']").attr('rel', '');
(based on this answer)

Click Delay On IPhone and Suppressing Input Focus

The webkit browser on iphone has a 300ms delay between when a user does a touch and when the javascript gets a click event. This happens because the browser needs to check if a user has done a double tap. My app doesn't allow zooming so a double tap is useless for me. A number of people have proposed solutions to this problem and they usually involve handling the 'click' on the touch end event and then ignoring the click generated by the browser. However, it doesn't seem to be possible to suppress a click that gets sent to an input element. This can cause a problem if you have a dialog that opens above a form then a user hits the close button and their click gets routed to an input element when the form disappears.
Example with jqtouch (for iphone only)

You have to capture your event on touchstart if you want to get the fastest possible responsiveness. Otherwise you'll be doomed with this input lag.
You have to remember though that capturing event on touchstart and responding to it makes it impossible to cancel action by dragging your finger out of responsive area.
I have personally used this in my PhoneGap html/js based iphone application and it worked perfect. The only solution to give this almost-native feel.
Now regarding your problem - have you tried to stop the propagation of the event? It should solve your problem.
$('.button').bind('touchstart', function(e){
e.stopPropagation();
// do something...
});
hope it helps,
Tom

My colleagues and I developed an open source library called FastClick for getting rid of the click delay in Mobile Safari. It converts touches to clicks and handles those special cases for input and select elements cleanly.
It's as easy as instantiating it on the body like so: new FastClick(document.body), then listening for click events as usual.

I made Matt's FastClick a jquery plugin:
stackoverflow link
Just had a comment about the onClick handler being called without the necessary scope being passed. I updated the code to make it work.
There also seems to be a problem when input elements lie under the ghost event's position: the focus event gets triggered without being busted.

I see two problems in the question. One is handling the delay in click and the other is handling input focus.
Yes, both of these have to be handled properly in mobile web.
The delay in click has deeper reasons. The reason for this 300ms delay is explained very well in this article.
Responsiveness of the click event.
Thankfully this problem is well known and solved by many libraries.
JQTouch, JQuery Mobile,
JQuery.tappable,
Mootools-mobile,
and tappable
Most of these libraries create a new event called tap. you can use the tap event similar to the click event. This jquery-mobile event handling might help.
$("#tappableElement").tap(function(){
// provide your implementation here. this is executed immediately without the 300ms delay.
});
Now, the second problem is with the handling of input focus.
There is a noticeable delay here also.
This can be solved by forcing focus on the element immediately for one of the touchstart or touchend events. This JQuery event handling might help.
$('#focusElement').bind('touchstart', function(e){
$(this).focus();
});
$('#focusElement').focus(function(e){
// do your work here.
});
You can do e.stopPropagation in 'touchstart' event handling to avoid propagation. But I would strongly advise against return false; or e.preventDefault as that would stop default functionality like copy/paste, selecting text etc.