0

I have what seems like a basic question, but may be more complex. I've been writing JavaScript for many years now, but never actually ran into a situation like this before so I'm curious...

Let's say there is a website that has many different developers working on many different JavaScript files. As you're using the website, you notice that a clickable link (that should be clickable) no longer works- as if it was purposefully prevented via JavaScript. Without manually going through the filesystem, how would you find what/where it is being prevented?

I've thought about this myself and the only thing I could come up with is the Chrome DevTools step feature and step through everything that happens on click of the link until you find what blocks it, but that could still be time consuming if there is a lot of functionality tied to the link.

Let's look at two actual code snippets to visualize the problem.

Here is an example link in the HTML:

<a id="the-link" href="https://example.com">Do Something</a>

Here's one way of stopping the link click in vanilla JS:

document.getElementById('the-link').addEventListener('click', function(e){
  e.preventDefault();
});

That JS code could be anywhere... so how would you find it?

What if that code was using jQuery? That makes the DevTools step feature even more convoluted because it needs to step through both jQuery() and on()- not to mention any other functionality that also listens for the click event.

jQuery('#the-link').on('click', function(){
  return false;
});

I'm curious how others would approach this...

GreatBlakes
  • 3,971
  • 4
  • 20
  • 28
  • Clicking could be stopped on the element, with a delegate, or by setting pointer events to be disabled. In that aspect, what you are asking for is fairly broad. – Taplar May 30 '19 at 19:02
  • I look at the link first, if there is a class or ID, I would just open inspector and look at the source js files and simply do a search for the class or ID. Most of the time it will come up. If it is an element without any identification, well then you are stuck with going thru code until you find it – Huangism May 30 '19 at 19:06
  • In this hypothetical, we can assume that it was one of the snippets I provided or one very similar (so not worried about `pointer-events: none`). I know it's somewhat of a broad question, but I'm looking for where others would start their search. – GreatBlakes May 30 '19 at 19:07
  • I would start the search by opening my team's favorite chat and ask who the hell did this. Then https://stackoverflow.com/questions/5816134/how-to-find-the-git-commit-that-introduced-a-string-in-any-branch – baao May 30 '19 at 19:07
  • So going at this another way. How are developers supposed to answer this question, that would not be considered as them giving their opinion? – Taplar May 30 '19 at 19:08
  • 3
    The dev tools gives you a list of all events bound on the element. it's under the "Event Listeners" tab on the right when you inspect an element. – Kevin B May 30 '19 at 19:09
  • 1
    @KevinB Great tip, thanks :) Combined with the "Computed" tab right next to it, one could also find if `pointer-events` is the culprit. Will this detect indirect handlers like `>` and `:first-child`? – OXiGEN May 30 '19 at 20:34
  • Yea, here on the delete comment button for example you can see events that were bound to the document. – Kevin B May 30 '19 at 20:37
  • @KevinB that is exactly the kind of answer I was looking for, thanks. If you want to re-submit that as an answer, I'll mark it as accepted. – GreatBlakes May 31 '19 at 23:31

0 Answers0