时间戳

首页 > 解决方案 > 将所有 onclick 更改为事件侦听器

javascript - 将所有 onclick 更改为事件侦听器

问题描述

我们最近在我们的软件中引入了 nonce 内容安全策略。问题是我们有数百个 HTML 元素通过 onclick 事件执行内联 Javascript，我们不想再接受“不安全内联”。

有没有办法从具有onclick属性集的页面中获取所有元素，阅读他们执行它的代码并添加类似

$(element).click(function(){
   doAction();
});

标签： javascriptjquerycontent-security-policynonce

解决方案

该onclick属性在您的 JS 中的任何其他单击事件处理程序之前执行。

function doSomething() {
  console.log('I do something')
}

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (typeof allElements[i].onclick === 'function') {
    allElements[i].addEventListener("click", function(e) {
      console.log('Before I do something');
    });
  }
}
<div onclick="doSomething()">Click me to doSomething</div>

一个技巧解决方法是做这样的事情：

function doSomething() {
  console.log('I do something')
}

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (typeof allElements[i].onclick === 'function') {
    allElements[i].addEventListener("mousedown", function(e) {
      console.log('Before I do something');
    });
  }
}
<div onclick="doSomething()">Click me to doSomething</div>

推荐阅读