[英]Using the same function with multiple buttons
我有多个按钮应该调用 OpenPanel 函数,但是当我使用内联事件处理程序时,显然 chrome 不喜欢它。 有没有其他选择? 谢谢!
网址:
<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);
}
铬错误:
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.
当我使用内联事件处理程序时,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);
}
使用 jquery,您可以将该类用作选择器和单击函数...
HTML:
<button id="showBg" class="panelB">Btn1</button>
<button id="showNews" class="panelB">Btn2</button>
查询:
$('button.panelB').click(function() {
alert($(this).attr('id'));
});
如果由于某种原因您需要调用OpenPanel
函数,那就是需要一个 DOM 元素而不是一个 jQuery 对象...
function OpenPanel(elem) {
alert(elem.id);
}
$('button.panelB').click(function() {
OpenPanel(this);
});
我希望它有帮助
您仍然可以使用:
$(".panelB").click(function(){
{...}
});
$(this)
包含被点击的当前元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.