jQuery I can’t read the nodename with (document).on(click [duplicate]

I can’t access attributes of button clicked, the result is «undefined».

Note: The example is built to avoid conflict between the function of the button and the touchstar function.

What’s wrong?

$("#main").on("touchstart, touchend", () => {
  console.log("touch zone");
})

$(document).on("click", "#main a", (e) => {
    e.preventDefault();

    var ab = this.nodeName;
  var cd = $(this).prop("nodeName");
  var ef = $(this).attr("href");
  
  console.log("Button click NODENAME> "+ab);
  console.log("Button click NODENAME> "+cd);
  console.log("Button click ATTR> "+ef);
});

.main {
  width: 40vh;
  height: 90vh;
  overflow: hidden auto;
  background: Gray;
}

<section id="main" class="main">
  <h1>Title demo <a href="#">Action</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <a href="#">Action</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <a href="#">Action</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <a href="#">Action</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
  <h1>Title demo <a href="#">Action</a></h1>
  <p>Lorem Lorem Lorem Lorem Lorem Lorem</p>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>