Question

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

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

现在，取消绑定该元素的所有javascript代码（也可能包括子代）。

Answer 1

CSS `pointer-events`属性

关闭CSS指针事件属性。

#foo { pointer-events: none; }

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。

当然，这将不关闭某些类型的事件处理程序，例如输入元素上的onchange处理程序。另一方面，它的优势在于，如果需要，可以为特定的后代元素重新启用pointer-events。

IE中不支持＆lt; 11。

添加新的事件处理程序

或者，您也可以尝试以下方法：

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

这不会阻止已经直接连接到元素的任何事件处理程序运行，但它会阻止事件冒泡，这将处理委托类型的情况。它将禁止添加到元素的任何未来事件处理程序运行。它还将抑制事件的默认行为（例如单击链接）。

您必须分别为每种事件类型执行此操作。无法定义适用于多个或所有事件的事件处理程序（您可能根本不想这样做）。

Answer 2

假设没有jQuery（也许它也适用于它？），解决方案并不简单： element.innerHTML = element.innerHTML;？

即将节点包含的所有内容的文本表示设置为节点包含的所有内容的当前文本表示。像这样的文本分配将任何/所有处理程序与element.addEventListener绑定。您还可以使用element.removeAttribute('inlineEventName')来修改html本身的任何内容。

你可以将.innerHTML或.outerHTML设置为它已经存在的任何副本，然后循环遍历一个处理程序名称数组并重复调用.removeAttribute。迭代任何目标的子节点，并再次（这个时间对于每个项目）循环遍历您想要杀死的一系列名称的名字。也许有一种迭代处理程序名称列表的方法，我不知道 - 我只是创建一个包含所有查找的数组并逐步遍历该数组，根据需要进行核对。您在初始替换中杀死所有JS连接的处理程序，然后需要删除节点和任何/所有子项的内联处理程序。

这是一个禁用身体及其子女内容的快速示例。你会注意到第一次，“杀死”＆＃39;通知会触发两次 - 一次来自内联处理程序，一次来自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>

Answer 3

是的，你可以使用这个

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

Answer 4

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

不带参数调用.off()会删除所有附加到元素的处理程序。

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

禁用特定元素的javascript

4 个答案:

CSS `pointer-events`属性

添加新的事件处理程序

禁用特定元素的javascript

4 个答案:

CSS pointer-events属性

添加新的事件处理程序

CSS `pointer-events`属性