-3

So, i know it is not the best of practices to use <a href="javascript: foo()"> and pls don't bash me for it. It is at the moment the best solution for an issue I have.

I am editing a website with a bunch of non-interactive elements such as div and spans which represent menus, drop-downs, buttons and so on. And onto the stage walks accessibility in all it's glorious hell raising issues.

So to solve it:

<div class="btn" onclick="foo()"> EDIT </div>
<!--had to become-->
<a href="javascript: foo();"><div class="btn">EDIT</div>

Now this obviously raises some issues with event targeting and whatnot, but let's forget those for now, most of the functions invoked from these buttons are actually just AJAX calls for new pages and such.

The bigger issue is the following:

How does one access any reference to the <a> tag in the foo() call? this is set to window and event is undefined. I tried passing event into the brackets like so:

<a href="javascript: foo(event)">

Still didn't work. So is there a way to access a reference to the <a> tag that invoked the function within the function itself?

EDIT to clarify why it is not a duplicate:

This question has nothing to do with this in an onclick. It has to do with getting a reference without using the onclick and instead using href="javascript: foo()" which is not the same as using onclick.

Dellirium
  • 1,362
  • 16
  • 30
  • 1
    Why don't use keep the `onclick` attribute ? `
    EDIT
    `     – Zenoo Jun 26 '18 at 08:00
  • @Zenoo will onclick trigger on press of an enter key? – Dellirium Jun 26 '18 at 08:01
  • @Zenoo — So it is an interactive control, which can be activated with the enter key. – Quentin Jun 26 '18 at 08:03
  • @Liam — No. The question is not about `onclick`. – Quentin Jun 26 '18 at 08:03
  • @Liam i mean its anything but a duplicate of of that thread – Dellirium Jun 26 '18 at 08:03
  • @Quentin I tested, it does trigger the `onclick` functions, does this mean it fires a `click` event and will triggere both the `onclick` handlers and the ones added via `addEventListener('click')` ? – Dellirium Jun 26 '18 at 08:04
  • 1
    "And onto the stage walks accessibility in all it's glorious hell raising issues." — You'd probably be better off solving them with liberal applications of `tabindex` and `aria-role`. – Quentin Jun 26 '18 at 08:05
  • @Quentin then this will be the way to solve it. As for your last suggestion, i did try the liberal use of said attributes, but they also need to be accompanied by a bunch of `addEventListeners('keypress' function(e){e.keyCode == 13 && e.currentTarget.click();}` handlers to trigger "clicks" on pressing "enter" on div's once they get focused by tabs which makes it a pain – Dellirium Jun 26 '18 at 08:07
  • @Dellirium what? It's basically pass `this`. As detailed in [the duplicate](https://stackoverflow.com/a/925742/542251), [this comment](https://stackoverflow.com/questions/51037758/a-tags-href-javascript-function-how-to-reference-the-caller-tag?noredirect=1#comment89067016_51037758) and [this answer](https://stackoverflow.com/a/51037941/542251). – Liam Jun 26 '18 at 08:15
  • @Liam it most certinly is not. It is "I am removing onclick, moving a function reference to a wrapper A tag's href. How to access the a tag or event in a function call where event is undefined". This is defined, as a window, which is to be expected. Event on the other hand is undefined, which poses an issue. Event is always defined on regular button click functions, here it is not. – Dellirium Jun 26 '18 at 08:20
  • @Liam the duplicate post is incorrect, the comment here as well as the answer solve the issue I have, however they are not the answer to the question posted. I am thankful to Zenoo and Quentin for helping me get past this issue, the question however still remains and it is how to reference either the element or the event (which would be then used to reference the element) from a `href=" javascript: foo()"` call. You can try and see for yourself that it is not the same as doing it on an `onclick` – Dellirium Jun 26 '18 at 08:40

1 Answers1

1

Simply keep the onclick attribute on an <a> tag :

<a onclick="foo(this)"><div class="btn">EDIT</div></a>

Calling a Javascript function through an href attribute doesn't pass the click event alongside it.

So no, you can't access the event through a href attribute Javascript function call.

Zenoo
  • 12,670
  • 4
  • 45
  • 69
  • It solves my issue, does not answer the question though. So I am torn on weather to mark it as accepted or not. – Dellirium Jun 26 '18 at 08:34
  • 1
    I'm only posting an answer to this because you requested it in the comments. You could also just delete your question, since I don't think anything can be gained from it. – Zenoo Jun 26 '18 at 08:37
  • question still remains unanswered, is it possible to gain references to the `event` or `tag` that the function originated from when using `href`. I am assuming it is not possible since no event gets `fired` probably – Dellirium Jun 26 '18 at 08:41
  • @Dellirium I edited my answer to include this. The click event is still fired, but it's not linked to your function call, so no, it is indeed not possible. – Zenoo Jun 26 '18 at 08:44