1

Thanks to a question asked earlier, I've noticed that the jQuery .trigger() (and obviously its shorthand .click()) don't fully work on hyperlinks. The event gets triggered perfectly fine, it's just as if it adds preventDefault() to it?

I was wondering why this is happening? Not looking for a solution because I know it would be easy to just grab the href attribute value and use JS to navigate towards the url instead.

Proof of concept:

$(document).ready(function(){
    // Method 1
  var btn1 = document.getElementById('btn1');
  var link1 = document.getElementById('link1');

  btn1.addEventListener('click', function (e) {
    fireEvent(document.getElementById('link1'), 'click');
  });

  link1.addEventListener('click', function (e) {
    console.log('Click on link1 triggered.');
  });

  function fireEvent(node, eventName) {
    var doc;
    if (node.ownerDocument) {
      doc = node.ownerDocument;
    } else if (node.nodeType == 9){
      doc = node;
    } else {
      throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
      var eventClass = "";

      switch (eventName) {
        case "click":
        case "mousedown":
        case "mouseup":
          eventClass = "MouseEvents";
          break;

        case "focus":
        case "change":
        case "blur":
        case "select":
          eventClass = "HTMLEvents";
          break;

        default:
          throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
      }
      var event = doc.createEvent(eventClass);
      event.initEvent(eventName, true, true);

      event.synthetic = true;
      node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
      var event = doc.createEventObject();
      event.synthetic = true;
      node.fireEvent("on" + eventName, event);
    }
  }

  // Method 2
  $(document).on('click', '#btn2', function(e){
    $('#link2').trigger('click');
  });

  $(document).on('click', '#link2', function(e){
    console.log('Click on link2 triggered.');
  });

  // Method 3
  $('#btn3').click(function(e){
    $('#link3').click();
  });

  $('#link3').click(function(e){
    console.log('Click on link3 triggered.');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>jQuery click / trigger events not following hyperlinks</h4><br/>
Method 1: Using pure JS<br/>
<button id="btn1">Button 1</button>
<a id="link1" href="https://google.com">Google</a><br/><br/>
Method 2: Using jQuery .on and .trigger methods<br/>
<button id="btn2">Button 2</button>
<a id="link2" href="https://google.com">Google</a><br/><br/>
Method 3: Using jQuery .click method<br/>
<button id="btn3">Button 3</button>
<a id="link3" href="https://google.com">Google</a>

A jsFiddle in case you want to play around with it yourself: https://jsfiddle.net/ap8whL9u/

icecub
  • 8,615
  • 6
  • 41
  • 70
  • 1
    This is actually expected. According to the [documentation](https://learn.jquery.com/events/triggering-event-handlers/): *"The `.trigger()` function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events."*. You may also want to read [this Q/A](https://stackoverflow.com/q/6068266/5768908). – Gerardo Furtado Nov 08 '19 at 05:41
  • @GerardoFurtado Thank you. I will actually close this question as a duplicate of that Q/A as it clearly answers my question. Much appreciated! – icecub Nov 08 '19 at 05:51

0 Answers0