How can i write a function which will make a whole website non-clickable?

1

I want to write a function like makeNonClickable() which will make the whole website non-clickable and also another function called remove() which will remove the functionality of makeNonClickable() function. TIA

2

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

2 Likes
3

Hi,

You can assign a class to your body element with a pointer-events:none CSS, and a pointer-events : initial to your CTA element.

one function to add/remove class from your body while CTA is clicked.

Something like that :wink:

FYI : https://dommagnifi.co/2016-05-16-basic-class-toggle-with-vanilla-js/

4

Have you any experience with coding JS? Have you completed the FCC courses, or some part of them, yet? They will help.

In theory, how would you toggle the makeNonClickable() function? I mean, you won’t be able to click a button to clear it.

The function itself could simply listen for the page load and, when loaded, capture any click event in the document root. By simply stopping the propagation and preventing the default action of the click, you do exactly what you’re looking for.

Read more on https://devdocs.io/, or feel free to clarify more, as @ilenia has suggested - how much do you know, what have you tried, what has been the result of experimenting?

5

I have completed this JavaScript Algorithms and Data Structures Certification (300 hours)

I want to manage these functions from console of any website.

The two functions should work on any website like dev.to etc

6

Here is a video preview of what should be done.

Link: https://youtu.be/ZkVPheXNqoc

Cant use these function to do this

  • stopImmediatePropagation
  • stopPropagation
  • preventDefault
  • elementFromPoint
  • appendChild
  • pointerEvents
7

Correct me if I’m wrong but it seems like you found a challenge you want to try and now you’re coming to us to ask how to do it. Sort of defeats the purpose of the challenge, doesn’t it?

8

I just want to know the topics I should learn to complete this.

9

I’d suggest writing some Regex that looks for tags and then the function changes the href to “javascript:void[0]”

10

Thank you so much! At least i got a hint with what i should start.

11

Can you suggest me any tutorial which will help me doing it?

12

I don’t. I use this frequently in my code editor utilizing find/replace with regex turned on. Basically for find I just paste in href="(.+?)" and replace with href=“javascript:void(0);” I know that doesn’t solve your problem, but hopefully helps some. Good luck :smile:

-4trio19 :pineapple:

1 Like
13

An interesting read as I fell down this particular rabbit hole, Google Chrome includes some useful functionality in the dev tools. You can do this:

console.log(getEventListeners(document) );

// And this works for any DOM node:
const myAnchors = document.querySelectorAll("a");
myAnchors.forEach(function(anchor){
  console.log(getEventListeners(anchor) );
}

Note, this is not the solution - but if you were to create, say, a custom attribute for each event you want to remove and move the eventListener list into that, then you effectively disable that event. Then, to re-enable it, simply remove them from the custom attribute and place them back in the event listener.

This is purely a thought experiment, I haven’t tried to actually do this, but it seems pretty feasible (and, with Chrome’s help, pretty easy).