使用与多个按钮相同的功能

时间:2017-09-28 06:16:00

标签: javascript google-chrome google-chrome-extension

我有多个按钮应该调用OpenPanel函数,但是当我使用内联事件处理程序时,显然chrome并不喜欢它。还有其他选择吗?谢谢!

HTML:

<button id="showBg" class="panelB" onclick="OpenPanel(this)">Btn1</button>

<button id="showNews" class="panelB" onclick="OpenPanel(this)">Btn2</button>

JavaScript的:

function OpenPanel(elem){
 alert (elem.id);
}

Chrome错误:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

3 个答案:

答案 0 :(得分:2)

  当我使用内联事件处理程序时,

chrome不喜欢它

Chrome内联事件处理程序没有问题。错误消息表明问题是您的内容安全策略。

通过HTTP标头或元标记,您已禁止使用内联事件处理程序。

这可能是最好的。内联事件处理程序带来恼人的陷阱。

使用JavaScript绑定事件处理程序。

function openPanelHanler(event) {
    OpenPanel(this);
}

var panels = document.querySelectorAll(".panelB");
for (var i = 0; i < panels.length; i++) {
    panels[i].addEventListener("click", openPanelHander);
}

答案 1 :(得分:0)

使用jquery,您可以将该类用作选择器和单击函数...

HTML:

lappend lst_nodes {*}$new_node

JQUERY:

<button id="showBg" class="panelB">Btn1</button>
<button id="showNews" class="panelB">Btn2</button>

如果由于某种原因你需要调用你的$('button.panelB').click(function() { alert($(this).attr('id')); }); 函数,那就是期望一个DOM元素而不是一个jQuery对象......

OpenPanel

我希望它有所帮助

答案 2 :(得分:0)

您仍然可以使用:

$(".panelB").click(function(){
   {...}
});

$(this)包含已被点击的当前元素。