如何将 JavaScript onclick 事件设置为带有 css 的类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4588759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you set a JavaScript onclick event to a class with css
提问by Juan
Let's say I want that every time the user click any link an alert pops up that says "hohoho".
Do I need to add onclick="alert('hohoho')"to every link or can I set this with CSS so that it works with every link?
假设我希望每次用户单击任何链接时都会弹出一个警告，上面写着“hohoho”。我需要添加onclick="alert('hohoho')"到每个链接还是我可以用 CSS 设置它以便它适用于每个链接？
回答by Alex Vidal
You can't do it with just CSS, but you can do it with Javascript, and (optionally) jQuery.
你不能只用 CSS 来做到这一点，但你可以用 Javascript 和（可选）jQuery来做到。
If you want to do it without jQuery:
如果你想在没有 jQuery 的情况下做到这一点：
<script>
window.onload = function() {
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
alert('ho ho ho');
}
}
}
</script>
And to do it without jQuery, and only on a specific class (ex: hohoho):
并且在没有 jQuery 的情况下执行此操作，并且仅在特定类上执行（例如：）hohoho：
<script>
window.onload = function() {
var anchors = document.getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if(/\bhohoho\b/).match(anchor.className)) {
anchor.onclick = function() {
alert('ho ho ho');
}
}
}
}
</script>
If you are okay with using jQuery, then you can do this for all anchors:
如果您可以使用jQuery，那么您可以对所有锚点执行此操作：
<script>
$(document).ready(function() {
$('a').click(function() {
alert('ho ho ho');
});
});
</script>
And this jQuery snippet to only apply it to anchors with a specific class:
这个 jQuery 代码片段仅将其应用于具有特定类的锚点：
<script>
$(document).ready(function() {
$('a.hohoho').click(function() {
alert('ho ho ho');
});
});
</script>
回答by kennebec
You can do this by thinking of it a little bit differently. Detect when the body is clicked (document.body.onclick- i.e. anything on the page) and then check if the element clicked (event.srcElement/ e.target) has a class and that that class name is the one you want:
你可以通过稍微不同的想法来做到这一点。检测何时单击正文（document.body.onclick- 即页面上的任何内容），然后检查单击的元素（event.srcElement/ e.target）是否具有类，并且该类名称是您想要的类：
document.body.onclick = function(e) { //when the document body is clicked
if (window.event) {
e = event.srcElement; //assign the element clicked to e (IE 6-8)
}
else {
e = e.target; //assign the element clicked to e
}
if (e.className && e.className.indexOf('someclass') != -1) {
//if the element has a class name, and that is 'someclass' then...
alert('hohoho');
}
}
Or a more concise version of the above:
或者上面更简洁的版本：
document.body.onclick= function(e){
e=window.event? event.srcElement: e.target;
if(e.className && e.className.indexOf('someclass')!=-1)alert('hohoho');
}
回答by Novikov
You could do it with jQuery.
你可以用jQuery来做。
$('.myClass').click(function() {
alert('hohoho');
});
回答by Rocky Madden
It can't be done via CSS as CSS only changes the presentation (e.g. only Javascript can make the alert popup). I'd strongly recommend you check out a Javascript library called jQueryas it makes doing something like this trivial:
它不能通过 CSS 来完成，因为 CSS 只会改变演示文稿（例如，只有 Javascript 可以使警报弹出）。我强烈建议您查看一个名为jQuery的 Javascript 库，因为它可以做这样的事情：
$(document).ready(function(){
$("a").click(function(){
alert("hohoho");
});
});
回答by Panchi
Here is my solution through CSS, It does not use any JavaScript at all
这是我通过 CSS 的解决方案，它根本不使用任何 JavaScript
HTML:
HTML：
<a href="#openModal">Open Modal</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
CSS:
CSS：
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
CSS alert No JavaScript Just pure HTML and CSS
CSS 警报 没有 JavaScript 只是纯 HTML 和 CSS
I believe that it will do the trick for you as it has for me
我相信它会像对我一样对你有用
回答by Erik Noren
Many 3rd party JavaScript libraries allow you to select all elements that have a CSS class of a particular name applied to them. Then you can iterate those elements and dynamically attach the handler.
许多 3rd 方 JavaScript 库允许您选择应用了特定名称的 CSS 类的所有元素。然后您可以迭代这些元素并动态附加处理程序。
There is no CSS-specific manner to do this.
没有特定于 CSS 的方式来做到这一点。
In JQuery, you can do:
在JQuery 中，您可以执行以下操作：
$(".myCssClass").click(function() { alert("hohoho"); });
