We Keep Coding

How to prevent redirection when drag an anchor bound ‘mousedowd, mousemove, mouseup’?

I'm trying to implement a draggable image.
BUT <img> is wrapped by <a>
<a href="http://somewhere.com">
<img src="someone.png"/>
</a>
I bind 'mousedown, mousemove, mouseup' on the anchor to implement draggale.
But when 'mouseup', it will redirect.
How to prevent redirection if it was dragged?
P.S. I tried to add event.preventDefault() into mouseup handler, but it doesn't work.
CODE IN DETAIL:
$('.item').on('mousedown', function (e) {
// if not using preventDefault(), image won't move when 'mousemove'
e.preventDefault();
$('.item').on('mousedown', function (e) {
// update 'left' and 'top'
});
});
$('.item').on('mouseup', function () {
// still redirect !?!?
return false
});

preventDefault prevents the default event for a mouseup on the dragable image, but the event is then propagated to the enclosing <a> tag which has its own default behavior. You'll need to stop event propagation so that the event isn't sent to the link in case of a drag/drop. EDIT: as mentioned by TrueBlueAussie in the comments, it's the click event that triggers the link. That's the event which must be blocked from reaching the link.
event.stopPropagation();
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Interesting question as I've never seen this in the MouseUp Event. What I'd do is just
return false;
from your mouseup handler, like this:
$("#anchor").on("click",function(){
//do some mouseup stuff
console.log("Doing mouseup stuff");
return false;
});
Here is a Fiddle:
https://jsfiddle.net/59ddut6s/3/
I think the event.stopPropagation(); mentioned by Jacque could be a better solution, but it's definitely not what I would typically think to do myself.
UPDATE: Minor change based on comments. Some useful info down there worth reading. I didn't consider that this method would case both event.stopPropogation() and event.preventDefault() but it makes sense that it would.
What still confuses me is WHY would on("click") prevent the link from navigating, but not on("mouseup")?

can't click a link after event.preventDefault

Question:
At a project(phonegap at android), I listen the touch event as MDN guide:
document.addEventListener("touchstart", handleStart, false);
function handleStart(evt){
evt.preventDefault();
.......
}
But after that, the links can't response to click event any more.

Because you basically took away the "default behavior" of the document. Is there a reason why you have that in your code. You are adding it to the whole document.
Don't put the addEventListener on your whole document, put it on an element within the document.

evt.preventDefault(); removes the events default behaviour. If you click a button which default action is to propagate the link, the preventDefault(); will prevent this from happening.

How do I make it so that if I click an <a> element it goes to the link, but it doesn't trigger the .click() event of its parent element?

I want to be able to click on a particular <a> and activate the link out, but not the parent's click.
preventDefault() doesn't work because then it won't link out.

You should use e.stopPropagation() to stop the event from bubbling.
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
~from jQuery docs .stopPropagation

You have to use stopPropagation instead of preventDefault
$('a').click(event){
event.stopPropagation();
});

preventDefault() doesn't prevent the action

When I use event.preventDefault() on a link it works, however when I use it on a button doesn't!
DEMO
My code:
<a id="link" href="http://www.google.com">link</a>
<button id="button" onclick="alert('an alert')">button</button>​
$('#link').click(function(event){
event.preventDefault();
});
$('#button').click(function(event){
event.preventDefault();
});
​
Link action is cancelled, but when I click on the button, still executes the onClick action.
Any help? what I want to do is to prevent the button onClick action without changing the button html (I know how to do
$('#button').removeAttr('onclick');

You want event.stopImmediatePropagation(); if there are multiple event handlers on an element and you want to prevent the others to execute. preventDefault() just blocks the default action (such as submitting a form or navigating to another URL) while stopImmediatePropagation() prevents the event from bubbling up the DOM tree and prevents any other event handlers on the same element from being executed.
Here are some useful links explaining the various methods:
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/event.stopImmediatePropagation/
However, since it still doesn't work it means that the onclick="" handler executes before the attached event handler. There's nothing you can do since when your code runs the onclick code has already been executed.
The easiest solution is completely removing that handler:
$('#button').removeAttr('onclick');
Even adding an event listener via plain javascript (addEventListener()) with useCapture=true doesn't help - apparently inline events trigger even before the event starts descending the DOM tree.
If you just do not want to remove the handler because you need it, simply convert it to a properly attached event:
var onclickFunc = new Function($('#button').attr('onclick'));
$('#button').click(function(event){
if(confirm('prevent onclick event?')) {
event.stopImmediatePropagation();
}
}).click(onclickFunc).removeAttr('onclick');

you need stopImmediatePropagation not preventDefault. preventDefault prevents default browser behavior, not method bubbling.
http://api.jquery.com/event.stopImmediatePropagation/
http://api.jquery.com/event.preventDefault/

The preventDefault function does not stop event handlers from being triggered, but rather stops the default action taking place. For links, it stops the navigation, for buttons, it stops the form from being submitted, etc.
What you are looking for is stopImmediatePropagation.

you can try this:
$('#button').show(function() {
var clickEvent = new Function($(this).attr('click')); // store it for future use
this.onclick = undefined;
});
DEMO

It have helped me
function goToAccessoriesPage(targert) {
targert.onclick.arguments[0].preventDefault();
...
}

How can I event.preventDefault() when using jQuery's mousedown and mouseup methods?

I am using event.preventDefault() to prevent concatenation of # which is the href of an anchor to the URL. I am performing events on the mousedown() and mouseup() parts of the click which is why I can't use click. But event.preventDefault() is not preventing the concatenation of # to the URL when envoking mouseup() or mousedown() methods. How can I get around this?

If you're talking about clicking a link, it is probably because there isn't a default behavior to prevent for mousedown and mouseup.
The default behavior of clicking a link requires a combination of mousedown plus mouseup on the link. If you mousedown then drag off the link before you mouseup, the link is not followed. The same vice-versa.
Only when you mousedown then mouseup is the default behavior activated. That event is represented by the click event.
EDIT: I guess I forgot to answer the question.
How do you get around it? Add a click() event handler that does e.preventDefault().
$('a.myElement').click(function(e){e.preventDefault()});
If you also want to stop propagation of the event, and if you're using jQuery 1.4.3 or later, you can do this:
$('a.myElement').bind('click',false);
From the docs for the bind()(docs) method:
Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling.
Again, it requires jQuery 1.4.3 or later.