Javascript 如何替换包含参数的内联事件处理程序（onmousedown、onmouseover、onmouseout等）以符合CSP规则？

我试了一整天，到处寻找解决办法。它并没有真正成功，老实说，在浏览stackoverflow多年后，这是我第一次发布寻求帮助的帖子。：-）

我最近实施了一个严格的CSP。我分叉了jasonlevitt的JSONscriptRequest类，以使用nonce保护更多的动态标记（）。 我很感激使用它，因为我确实进行了定制，并经常使用它（很多模块都依赖于它）

最初，脚本以HTML格式输出：

<div class="suggestions" id="pcId0" onmousedown="suggestBoxMouseDown(0)" onmouseover="suggestBoxMouseOver(0)" onmouseout="suggestBoxMouseOut(0)">...</div>
<div class="suggestions" id="pcId1" onmousedown="suggestBoxMouseDown(1)" onmouseover="suggestBoxMouseOver(1)" onmouseout="suggestBoxMouseOut(1)">...</div>(and so on, depending on the number of results.)
...

我试过这么做

document.getElementById("placeInput").addEventListener("change", function() {

var suggestions = document.getElementsByClassName('suggestions');  

console.log(suggestions);

for (i = 0; i < suggestions.length; i++) {
suggestions[i].addEventListener("mousedown", suggestBoxMouseDown([i]));
suggestions[i].addEventListener("mouseover", suggestBoxMouseOver([i]));
suggestions[i].addEventListener("mouseout", suggestBoxMouseOut([i]));
}

});`

---

有人有什么想法吗？

Soem快速重构代码的想法：

使用

实现类
.suggestions
和
suggestionMouseOver
的规则。suggestions

和CSS中的：

这样就不需要监视

鼠标指针

和

鼠标移动

事件。建议类元素只需更改样式即可。（注意

mouseover

和

mouseout

在鼠标悬停类的子元素上移动时会触发。）

在HTML元素上生成

data-

属性以记录建议的索引号。目前，这是作为

id

属性值上的数字后缀实现的，虽然仍有可能，但不是最干净的解决方案：

<div class="suggestions" data-num="0">...</div>
<div class="suggestions" data-num="1">...</div> <!-- and so on -->

---

感谢@traktor53的好建议，这就是我想到的

关于stackoverflow的未来研究人员注意：目标是替换包含参数的javascript内联事件处理程序（例如：

onmouseout（0）

，…）。背后的原因是遵守内容安全策略（CSP），该策略出于明显的原因不允许使用内联脚本。我将下面的代码应用于一个定制的jsr_class.js，在GeoNames API上获取结果

HTML 它是动态生成的，如下所示：

<div class="suggestions" id="pcId0" data-num="0"> Vannes - (56000) &nbsp;FR</div>
<div class="suggestions" id="pcId1" data-num="1"> Vannes - (56001 CEDEX) &nbsp;FR</div>
<div class="suggestions" id="pcId2" data-num="2"> Vannes - (56002 CEDEX) &nbsp;FR</div>
<div class="suggestions" id="pcId3" data-num="3"> Vannes - (56003 CEDEX) &nbsp;FR</div>

Javascript 出于实际原因，我不想修改我原来的函数，我知道可以使用更干净的方法

function triggerMouseDown( event) {
let suggestionDiv = event.currentTarget;
let suggestionNumber = suggestionDiv.dataset.num;

suggestBoxMouseDown(suggestionNumber);
}

document.getElementById("placeInput").addEventListener("change", function() {

Array.from( document.getElementsByClassName('suggestions') )
.forEach( div => div.addEventListener("click", triggerMouseDown));
});

---

非常感谢@traktor53。按照你的建议，一切正常！

<div class="suggestions" data-num="0">...</div>
<div class="suggestions" data-num="1">...</div> <!-- and so on -->

function sugestionMouseDown( event) {
    let suggestionDiv = event.currentTarget;
    let suggestionNumber = suggestionDiv.dataset.num;
    // process parameters suggestionDiv and suggestionNumber
    // ...
}
Array.from( document.getElementsByClassName('suggestions') )
.forEach( div => div.addEventListener("mousedown", suggestionMouseDown));

<div class="suggestions" id="pcId0" data-num="0"> Vannes - (56000) &nbsp;FR</div>
<div class="suggestions" id="pcId1" data-num="1"> Vannes - (56001 CEDEX) &nbsp;FR</div>
<div class="suggestions" id="pcId2" data-num="2"> Vannes - (56002 CEDEX) &nbsp;FR</div>
<div class="suggestions" id="pcId3" data-num="3"> Vannes - (56003 CEDEX) &nbsp;FR</div>

.suggestions { 
    font-size: 14;
    background-color: #fff; 
    border-radius: 5px; 
}

.suggestions:hover { 
    font-size: 14;
    background: #456ae7; 
    color: white; 
    cursor: pointer; 
    border-radius: 5px;
}

function triggerMouseDown( event) {
let suggestionDiv = event.currentTarget;
let suggestionNumber = suggestionDiv.dataset.num;

suggestBoxMouseDown(suggestionNumber);
}

document.getElementById("placeInput").addEventListener("change", function() {

Array.from( document.getElementsByClassName('suggestions') )
.forEach( div => div.addEventListener("click", triggerMouseDown));
});