jQuery event.preventDefault() don't work unless debugging

Question

I am trying to use this approach in order to convert GET parameters to POST. I also want the anchor to be properly handled even if the middle mouse button is clicked.

This is how I did the the event handlers binding:

$(document).ready(function () {
    $(".post").each(function(){
        $(this).mousedown(function(evt){
            switch(evt.which){
                case 1:
                case 2:
                    evt.stopPropagation();
                    evt.preventDefault();
                    get2post(evt);
                    break;
            }
        });
    });
});

When I click on the .post anchor, the browser sends the POST request, and then immediately aborts it, sending the supposedly prevented GET request instead.

Firebug reports that the POST request was aborted, and then the GET is sent

(Please do not mind the error that happens when the GET request is processed. This happens exactly because the parameters should be sent via POST, not GET)

Finally, when I debug the get2post functions, it works as expected. I don't have any clue about why the evt.preventDefault() line works only when debugging.

I tried it on Firefox and Chrome, and got the same outcome. What is happening here? Why the evt.preventDefault() don't work unless debugging?

A. Wolff · Accepted Answer · 2015-06-17T21:06:28.667

1

There is no default behaviour for anchor, button or input on mousedown event. You want to prevent default behaviour of click event instead.

$(function () {
    $('.post').on('click', function (evt) {
        switch (evt.which) {
            case 1:
            case 2:
                evt.stopPropagation();
                evt.preventDefault();
                get2post(evt);
                break;
        }
    });
});

edited Jun 17 '15 at 21:06

answered Jun 17 '15 at 21:01

A. Wolff

74,033
9
94
155

Your solution worked, but only when the left button is clicked. The middle button opens a new tab and send the parameters via GET. – Metalcoder Jun 18 '15 at 11:49
I cannot actually test it. Debug it and see what's going on.Maybe just use: `$('.post').on('click', function (evt) {get2post(evt); return false;});` – A. Wolff Jun 18 '15 at 12:00
Same outcome. I have an idea: maybe the browser behaviour when processing a "open in new tab" is bypassing javascript; it just fetchs the URL (with the GET parameters) and open in a new that. This hypothesis is sound, because the code is not even executed when the middle button is clicked. Maybe there is no safe way to convert GET parameters to POST in every case; it will work when left-clicking, but not with middle-clicking. Even worse, since this is a browser behaviour, each vendor may implement this feature in different ways. – Metalcoder Jun 18 '15 at 12:45
1

You cannot change some default browser behaviours and anyway any new tab opens has to be a GET request, that's how works the http protocol. Now maybe just disable context menu too: `$('.post').on('click contextmenu', handler); ` – A. Wolff Jun 18 '15 at 12:49
I'm afraid that if the middle click don't work, it may confuse some users. This is because they are *advised* to open the link in a new tab, in order to use both pages. It seems that I'll have to go with a form and a button, so there is no need to override the context menu in this particular case. But thanks for the tip, disabling the context menu was the next step. – Metalcoder Jun 18 '15 at 14:14

jQuery event.preventDefault() don't work unless debugging

1 Answers1