All geek questions in one place

Disable javascript for a specific element

Is it possible to disable javascript only for a specific element?

Suppose a div with id foo has javascript code, which can be inline, internal, or external javascript code.

Now untie all javascript codes for this element (possibly also to include children).

+6
source share
4 answers

CSS pointer-events property

Disable the CSS event-pointer property.

 #foo { pointer-events: none; }

See https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events .

Of course, this will not disable certain types of event handlers, such as the onchange handler on an input element. On the other hand, this has the advantage that you can re-enable pointer-events for certain descendant elements.

No support in IE <11.

Adding a New Event Handler

Alternatively, you can also try the following:

 elt.addEventListener('click', function(evt) { evt.stopPropagation(); evt.preventDefault(); return false; });

This will not stop the execution of any event handlers already attached directly to the element, but it will stop the event from bubbling, which will concern situations like delegation. It will suppress any subsequent event handlers added to the running element. It will also suppress the behavior of the default event (for example, clicking on a link).

You will need to do this for each type of event individually. It is not possible to define event handlers that apply to several or all events (which you probably would not want to do anyway).

+1
source

Assuming jQuery (maybe it will work with this too?), Is not such a simple solution as: element.innerHTML = element.innerHTML; ?

I. Set the textual representation of everything that node contains as the current textual representation of everything that is contained in node. Text assignments like this nuke, all / all handlers are associated with element.addEventListener . You can also use element.removeAttribute('inlineEventName') for nuke in the html file itself.

You can simply install .innerHTML or .outerHTML as a copy of what you already have, and then skip the array of handler names and call .removeAttribute again. Iterate through the child nodes of any target and again (this time for each element) loop through an array of media names that you would like to kill. Perhaps there is a way to iterate over the list of handler names, I don’t know - I would just create an array of all of them that find and pass through this array, nuking as necessary. You would remove all JS-related handlers at the initial replacement, then you will need to remove the built-in handlers for node and all / all children.

Here is a quick example that disables everything in the body and its children. You will notice that the first time a “kill” notification fires twice — once from the built-in handler and once from the js handler. The second time the notification only works once. This time from the built-in handler. Try removing it or using .removeAttribute , as I suggested earlier, to use this handler.

 <!DOCTYPE html> <html> <head> <script> function byId(e){return document.getElementById(e);} window.addEventListener('load', onDocLoaded, false); function onDocLoaded() { byId('mFileInput').addEventListener('change', onFileChosen, false); byId('mBtn').addEventListener('click', killPageJs, false); } function killPageJs(evt) { alert('killed'); document.body.innerHTML = document.body.innerHTML; } // fileVar is an object as returned by <input type='file'> // imgElem is an <img> element - can be on/off screen (doesn't need to be added to the DOM) function loadImgFromFile(fileVar, imgElem) { var fileReader = new FileReader(); fileReader.onload = onFileLoaded; fileReader.readAsBinaryString(fileVar); function onFileLoaded(fileLoadedEvent) { var result,data; data = fileLoadedEvent.target.result; result = "data:"; result += fileVar.type; result += ";base64,"; result += btoa(data); imgElem.src = result; imgElem.origType = fileVar.type; // unnecessary for loading the image, used by a current project. } } function onFileChosen(evt) { if (this.files.length != 0) { var tgtImg = byId('tgt'); var curFile = this.files[0]; loadImgFromFile(curFile, tgtImg); } } </script> <style> </style> </head> <body> <button id='mBtn' onclick='killPageJs();'>Kill</button><hr> <input id='mFileInput' type='file'/><br> <img id='tgt' /> </body> </html>
0
source

yes you can use this

 document.querySelector("element id or class here").style.pointerEvents = "none";
0
source

You can use the .off() function to remove the event handler.

Calling .off() without arguments removes all handlers attached to elements.

https://api.jquery.com/off/

0
source

Source: https://habr.com/ru/post/977252/

More articles:


All Articles