禁用特定元素的javascript

禁用特定元素的javascript,javascript,jquery,Javascript,Jquery,是否可以仅对特定元素禁用javascript 假设id为foo的div有一些javascript代码,可能是内联的、内部的或外部的javascript代码 现在,解除绑定该元素的所有javascript代码(可能还包括子元素)。假设没有jQuery(也许它也可以使用它?),解决方案不是很简单吗 element.innerHTML=element.innerHTML 即,将节点包含的所有内容的文本表示形式设置为节点包含的所有内容的当前文本表示形式。像这样的文本赋值将使用元素.addEventLis

是否可以仅对特定元素禁用javascript

假设id为foo的div有一些javascript代码,可能是内联的、内部的或外部的javascript代码

现在,解除绑定该元素的所有javascript代码(可能还包括子元素)。

假设没有jQuery(也许它也可以使用它?),解决方案不是很简单吗
element.innerHTML=element.innerHTML

即,将节点包含的所有内容的文本表示形式设置为节点包含的所有内容的当前文本表示形式。像这样的文本赋值将使用
元素.addEventListener
绑定任何/所有处理程序。您还可以使用
element.removeAttribute('inlineEventName')
来取消html本身中的任何内容

您可以将.innerHTML或.outerHTML设置为其现有内容的副本,然后在处理程序名称数组中循环,并重复调用.removeAttribute。 迭代任何目标的子节点,然后再次(这一次是针对每个项目)循环遍历您想要杀死的hander名称的名称数组。也许有一种方法可以遍历处理程序名列表,我不知道——我只需要创建一个数组,包含所有找到的处理程序名,并逐步遍历该数组,根据需要使用NUK。在初始替换中,您将杀死所有JS附加的处理程序,然后需要删除节点和任何/所有子节点的内联处理程序

下面是一个快速的示例,它禁用身体及其子体中的所有内容。您会注意到,第一次,“kill”通知会触发两次—一次来自内联处理程序,一次来自js添加的处理程序。第二次,通知只发出一次。这一次来自内联处理程序。 尝试删除它或使用
.removeAttribute
,就像我之前建议的那样,也可以使用核处理程序

<!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>

函数byId(e){returndocument.getElementById(e);}
window.addEventListener('load',onDocLoaded,false);
函数onDocLoaded()
{
byId('mFileInput')。addEventListener('change',onFileChosen,false);
byId('mBtn')。addEventListener('click',killPageJs,false);
}
函数killPageJs(evt)
{
警惕(“死亡”);
document.body.innerHTML=document.body.innerHTML;
}
//fileVar是由返回的对象
//imgElem是一个
杀死

CSS
指针事件
属性 关闭CSS指针事件属性

#foo { pointer-events: none; }

当然,这不会关闭某些类型的事件处理程序,例如输入元素上的
onchange
处理程序。另一方面,它的优点是,如果需要,可以为特定的子元素重新启用
指针事件

IE<11中没有支持

添加新的事件处理程序 或者,您也可以尝试以下操作:

elt.addEventListener('click', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    return false;
});
这不会阻止任何已直接连接到元素的事件处理程序运行,但会阻止事件冒泡,这将处理委托类型的情况。它将禁止任何添加到元素的未来事件处理程序运行。它还将抑制事件的默认行为(例如单击链接)


您必须分别为每种事件类型执行此操作。无法定义应用于多个或所有事件的事件处理程序(您可能无论如何都不想这样做)。

是的,您可以使用此选项

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

可以使用Jquery的
.off()
函数删除事件处理程序

在没有参数的情况下调用
.off()
,将删除附加到元素的所有处理程序


我不确定你能不能做到。对于内联-是,如果它尚未运行。对所有其他人来说——它们在页面加载时被解析,之后它们没有任何特定的位置,正如我所想。在头的顶部,脚本首先运行,并确保为此禁用javascript,不?不,正如我所想。DOM元素在通过浏览器解析后可以访问。不要认为有什么方法可以阻止js块进入处理过程。请记住,如果元素被替换,即使是元素本身,绑定到它的任何事件都将丢失。这对委托事件没有帮助,但在您的情况下可能有用。还可以解析各种内联处理程序的属性并删除them@charlietfl-这取决于“事件被绑定”的方式以及元素被替换的方式。不,没有通过处理程序访问/循环的方法。您可以通过删除属性来删除
onClick
句柄等,但无法找到或删除使用
addEventListener
等设置的任何句柄。
addEventListner
是微不足道的,因为它们随着初始文本替换而消失。@LajosArpad这怎么不提供答案呢。这看起来直接解决了OP最初的询问。