Consider the following code :

HTML

<a href="" target="_blank" id="myLink" class="anyclass">testlink</a>

JAVASCRIPT

$('#myLink').on("mousedown",doMouseDown);

function doMouseDown(e)
{
    e.stopImmediatePropagation();
    console.log("Mouse down");
    return true;
}

It's a very simplified version of my code, but the problem is exactly the same. In 2 words : using e.stopImmediatePropagation() in my handler, I would expect that I'm not sent to Google when I click the link. I should only get the console.log() executed. All my research indicate that I'm right to think so, but still it's executing both the "mousedown" handler, and the default "click" handler for a link (i.e. it opens Google in a new tab).

I've tried, without conviction, to add a e.preventDefault() as first instruction of my handler, I've tried returning false , I've tried defining my handler as an anonymous function when binding, I've tried simply calling it from an anonymous function, all this in different binations, without any improvement. I must admit I'm quite out of ideas to fix this. Would any of you be so kind to point me in the right direction ? Any help would be grandly appreciated.

If you want to test, here's the fiddle

Consider the following code :

HTML

<a href="http://www.google." target="_blank" id="myLink" class="anyclass">testlink</a>

JAVASCRIPT

$('#myLink').on("mousedown",doMouseDown);

function doMouseDown(e)
{
    e.stopImmediatePropagation();
    console.log("Mouse down");
    return true;
}

It's a very simplified version of my code, but the problem is exactly the same. In 2 words : using e.stopImmediatePropagation() in my handler, I would expect that I'm not sent to Google when I click the link. I should only get the console.log() executed. All my research indicate that I'm right to think so, but still it's executing both the "mousedown" handler, and the default "click" handler for a link (i.e. it opens Google in a new tab).

I've tried, without conviction, to add a e.preventDefault() as first instruction of my handler, I've tried returning false , I've tried defining my handler as an anonymous function when binding, I've tried simply calling it from an anonymous function, all this in different binations, without any improvement. I must admit I'm quite out of ideas to fix this. Would any of you be so kind to point me in the right direction ? Any help would be grandly appreciated.

If you want to test, here's the fiddle

• javascript
• jquery
• mouseevent

• It can't be that hard -> jsfiddle/3FM9P/4 – adeneo Commented Sep 11, 2013 at 16:16
• @PSL - not really, in most browsers both mousedown and mouseup must fire before the click event -> jsfiddle/sezwj – adeneo Commented Sep 11, 2013 at 16:19
• @Bartdude probably you can set up a flag in the mousedown to decide whether you want to preventDefault or not during the click event. i am assuming reason could be that for the default behavior of click is set only when mouse down and up are plete. – PSL Commented Sep 11, 2013 at 16:24
• @PSL What do you mean ? I want to preventdefault for sure, I actually don't want anything to be done on click, but well on mousedown. If it's possible to specifically tell "prevent default on the click event of the same object I'm defining onmousedown handler for", I would be glad to know how, it's a bit too far in Javascript for my actual knowledge... I thought stopImmediatePropagation would have this result, among others. – Laurent S. Commented Sep 11, 2013 at 16:30
• @Bartdude probably i am not clear on If it's possible to specifically tell "prevent default on the click event of the same object I'm defining onmousedown handler for". Inside your event handler this represents the element you clicked on... and subsequently that elements click handler gets executed. What exactly do you need if you always want to preventdefault for the anchor click. – PSL Commented Sep 11, 2013 at 16:35

2 Answers 2

Try this

var i=0;
$('#myLink').on('mousedown mouseup click', function(e) {

    e.preventDefault();
    e.stopImmediatePropagation();
    console.log(e.type);
    console.log(i);
    i++;
});

prints in console

"mousedown"
0
"mouseup"
1 
"click"
2

and using

var i=0;
$('#myLink').on('mousedown mouseup click', function(e) {
if(i>0)
    {
    return false;
    }
e.preventDefault();
e.stopPropagation();
console.log(e.type);
console.log(i);
i++;
 });

Prints in console

"mousedown"
0

Thank you for the idea! I've been struggling with implementing hover and click (mobile Chrome would trigger hover and click on tap on the menu). I modified it a bit to fit my needs, however it's not 100% fixed - on enter in PC and BlackBerry browsers you have to click twice in order to close the submenu.

http://jsfiddle/j24gpw4z/2/

var i = 0;
function preventClick(e) {
    console.log("function");
    if (i > 0) {
        console.log(i + ": " + e.type);
        i = 0;
        console.log("false: " + i);
        return false;
    }
    $("#subnav").slideToggle("fast", "linear");
    console.log(i + ": " + e.type);
    i++;
};

$(".submenu").hover(function(e) {
    e.preventDefault();
    preventClick(e);
    i++
},
                    function(e) {
    e.preventDefault();
    console.log("hover out");
    $("#subnav").hide();
    i = 0;
}
                   );

$(".submenu").click(function(e) {
    e.preventDefault();
    preventClick(e);
    i = 0;
});