jQuery OnClick doesn't work in IE when “ctrl” + “click” executed

Question

I have a jQuery function that executes an ajax POST. Whenever a link (href) is "clicked" with a populated id, the functions kicks off an action.

My function works great in Chrome. When I simply "click" a link OR hold down "Ctrl" + "Click" (to open in a new tab), the ajax POST does what it is supposed to do. In IE, when I simply "click" a link, it works as expected. BUT when I hold down "Ctrl" + "Click" (to open in a new tab) the ajax POST is completely ignored as if nothing was clicked. The new tab in IE opens up, but my ajax POST gets skipped.

How do I get a "Ctrl" + "Click" to be recognized by jQuery in Internet Explorer?

$(document).ready(function () {
        $(document).on('click', 'a', function () {
            var reportNum = $(this).attr("id");
            var embed = $(this).attr("name");
            if (reportNum == null) {
            } else {
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("updateHitCount", "Base")",
                    data:
                {
                    reportNum: reportNum
                }
                });
            }
        });
    });

---

HTML

---

<a href="https://google.com" id="foo">Click Here!</a>

Answer 1

After having a play in IE with your code, it looks like when carrying out ctrl+click it doesn't see it as a click event, therefore your click event is not firing. Hypothetically IE is seeing it as a ctrl+click (that event doesn't exist as it's own entity).

A solution would be to use a mouseup/down event instead

https://jsfiddle.net/x7sap85f/19/

    $(document).ready(function () {
        $('body').on('mouseup', 'a', function (e) {
        e.preventDefault();
            alert('clicked!');
        });
    });

You probably don't need to prevent default, depending on what you want to happen exactly.

Answer 2

This is an interesting question.

It made me learn something new about cross-browser think abouts .

From what I observed, I think that Internet Explorer intentionally prevents the click event to occur when CTRL key is down. That is in order to manage pop-ups the Microsoft way...

I also found out that this behavior exist at least since IE7 .

If you look at the Internet Options, in Tabs.
There is simply not way to select something like a Don't do anything .

I made a CodePen to test it...

It seems that the only case where the click event is fired is if the href is a blank hash ( href="#" ).

So, Like Vector suggested, using the mouseup event instead of a click may be a walk-around.

Answer 3

Internet explorer is a little tricky . Since you are using jquery try changing

$.ajax to $.post and also Add a attribute cache: false inside your Ajax body