Develop Reference

Phonegap touch not working: simulate click on mobile

I have the code:
wrapper.addEventListener("click", function (event) {
//do thing
});
However it doesn't fire in mobile.
I tried replacing click with touch but then nothing happens. I tried replacing click with touchstart and the activates, but it also triggers when I'm trying to drag on top of the element.
How do I grab a click event while ignoring a drag event?

createjs prevent hyperlink interaction

In my simple application canvas wrapped by hyperlink. Some objects, which are placed on canvas stage have special mouse interaction on click event. Is there any possible solutions to prevent hyperlink jumping by clicking on objects with my mouse click event listeners?

Normally you can just call preventDefault on the generated mouse event, and it will stop the link event from firing.
element.addEventListener("click", function(e) {
e.preventDefault();
}, false);
This is not possible using EaselJS because although you can access the nativeEvent on any EaselJS mouse event, EaselJS doesn't use the "click" event at all (and instead uses a combination of "mousedown" and "mouseup"). So preventing default on a click event will do nothing.
Doesn't work
// You would expect this to work.
myShape.on("click", function(e) {
e.nativeEvent.preventDefault(); // Nothing. This cancels a "mouseup" instead.
});
Workaround
However, you can work around this pretty easily. Set a flag on the clicked item (or wherever you would set it in your application) any time it is clicked.
myShape.addEventListener("click", function(event) {
myShape.clicked = true;
}, false);
Then, listen for the canvas click event yourself, check and check the flag. Make sure to reset it after. This is possible because "click" is always fired after "mouseup"
stage.canvas.addEventListener("click", function(event) {
if (myShape.clicked) { event.preventDefault(); }
myShape.clicked = false;
}, false);
Here is a quick fiddle showing it working. http://jsfiddle.net/buqkvb1u/
We are looking to see if this makes sense to handle in EaselJS. Thanks for your report!

Disable swipe event when using popup in jquery mobile

My application has a swipeleft and swiperight feature which brings up the navigation menu. The code looks like this.
$(document).on("swipeleft swiperight", function(swipeEvent) {
//my code here
}
In a page of the app I am using a jquery mobile popup to display an image. The problem I have is that the swipeleft and swiperight still works inside the popup and brings up the navigation bar in the background and I dont want this.
I have used data-dismissible="false" on the popup widget but that does not help.
How do you think I should fix this problem?

You could bind a function to the popupcreate event (http://api.jquerymobile.com/popup/#event-create) that nullifies the swipeleft swiperight functionality. One way to do this would be to have the popupcreate update a global variable to true, and then have your .on(swipeleft,swiperight) check the value of that variable before doing anything. Then you could set it to false on popupafterclose event.

Using event.stopPropagation(); worked for me.
I added swipeleft and swiperight handlers on my popup div and used event.stopPropagation(); inside it.
$('#mypopup').on('swipeleft swiperight', function(event) {
event.stopPropagation();
});

In the mousedown event, is it possible to cancel the resulting click event? or pass info to it?

for arcane reasons I need to be able to cancel the click event via the mousedown event.
Briefly; I am creating a context menu in the mousedown event, however, when the user clicks on the page the context menu should disappear.
I am not able to use the mousedown event over the click in that scenario as I want the user to be able to click links inside the menu ( a full click would never travel to the <a> based menu elements ).
If it is any help, jQuery can be applied.
I would like to either be able to prevent the click event from happening from within the initial mousedown, or be able to pass information to the click event (via originalEvent or otherwise).
TIA

Seems to be impossible, neither FF nor Opera didnt cancel upcoming click when prevented in mousedown and/or mouseup (as side note: click is dispatched after mouseup if certain conditions met). testcase: http://jsfiddle.net/ksaeU/

I have just had the exact same problem. I fixed my context menu by closing it on mousedown and eating the mousedown event on the menu so that I can still receive clicks on the menu, like so:
$(document).one('mousedown.ct', null, function() { cmenu.hide(); return false; });
cmenu.bind('mousedown', function(e) { e.stopImmediatePropagation(); });
And in the hide() function I unbind the mousedown.ct again, in case it was closed due to a click on an item.

Hey, I think this is what you are trying to do with your code. If not, I apologize, I may have misunderstood the question. I used jQuery to get it done: http://jsfiddle.net/jackrugile/KArRD/
$('a').bind({
mousedown: function(){
// Do stuff
},
click: function(e){
e.preventDefault();
}
});

mouseUp event on drag

I have a link which has mousedown and mouseup handlers to animate some objects on page.
When dragged (drag and drop) link fires mousedown event but it doesn't fire mouseup when released. is there a workaround for this problem?
Here is a example, if you click link normally it works but when you drag the link mouse up doesn't happen:
http://jsfiddle.net/hL3mg/1/

Handling drags
Something crucial nobody mentions here is that there actually is an event to register the end of a drag, which as explained by the other answers is what's happening here. The event is called dragend, so you can simply do
$("a").on("dragend",function(){
console.log("Drag End");
});
To register the end of the drag. The disadvantage of this is that you will still see a drag interface (in other words: the browser will show some UI to notify the user he's draggin).
Registering mouse up's
Note from 2020: This isn't a good answer, but I am not familiar anymore with jQuery, so can't update it well. I would guess that event.preventDefault() on the dragstart might or might not be relevant.
There is however also a way to register the sought after mouse ups, simply cancel the drag behaviour by returning false in the click event listener, and then register the mouseup on the document.
$("a").mousedown(function(){
console.log("Mouse Down");
return false;
});
$(document).mouseup(function(){
console.log("Mouse Up");
});
The only remark that I do feel like I have to make is that in a stand alone jsfiddle this worked perfectly, in my own code it did not, so I am listening for both the mouseup and the dragend just to be sure.

What I did to solve this is associate an "mouseOut" event to every link and check if any link has been pressed. If it did, the mouseOut would fix the positioning of the link. Here's the code:
var mouse_button = false;
$('a')
.mousedown(function(){
$(this).css('top', '+=2');
mouse_button = true;
})
.mouseup(function(){
$(this).css('top', '-=2');
mouse_button = false;
})
.mouseout(function(){
if (mouse_button) {
$(this).css('top', '-=2');
mouse_button = false;
}
});

It seems that the mouseup event won't be fired because your mouse has left the link when you release the left button.
From http://www.quirksmode.org/js/events_mouse.html :
Suppose the user depresses the mouse
button on a link, then moves his mouse
off the link and then releases the
mouse button. Now the link only
registers a mousedown event.
Maybe you can do this to walkaround:
register mousedown event for a link
register mouseup event for the whole document
when the link fire mousedown event , then the document fire mouseup event, you can think that link is firing mouseup event

What you described is by conscious design.
It has always been the intent that if you mouse down on a link, a button, whatever and change your mind before you've mouse up, you can move the cursor off the link or button and then release the mouse button and the action - the link, button, whatever - will not occur.
It is by design that the mouse up is not sent to the object which received the mouse down if the cursor is moved off the item before mouse up.
This is a user interface design consideration. This is why you should program such that it takes a click to initiate just about any action - not just a mouse down.
I grant you that there may be times where you want to take action on a mouse down, such as in dragging, but it is the exception and when done properly, the mouse up will be seen - except in some versions of IE when the mouse up will be lost if you drag the cursor off the page - to the top, left or right.
If you want to move things around and be able to see the mouse up, it is far better to use divisions or such than things like links.
Links are intended to be just that: link to something. Yes, you can code JavaScript to be executed when the link is clicked - href="javascript:someFunction();" or you can code onclick to execute something or even mouse up over down out. However, the link is intended to do something not to be dragged around.
Use a division or a span and move it around.
Bob

If you look closely at what the browser does, it "drags" the DOM object, in my case a link, upon release the mouseup event does not fire for the DOM object (underneath the mouse, when dragged) or the document (it doesn't seem to bubble).
adding draggable="false" attr helps ...
link
however, there is still an issue of the user highlighting/selecting something with their cursor and dragging the selected element(s).
Using the mouseout event also helps.

If you need to handle dragging in jQuery why not use Draggable?