Javascript 在之后添加带有 css 伪元素的 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8301476/
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
Add onclick with css pseudo-element after
提问by Oli
Is it possible in my css file to do something like that?:
是否可以在我的 css 文件中做类似的事情？：
.myclass:after{
content:"click me";
onclick:"my_function()";
}
I want to add after all instances of myclassa clickable text, in the css style sheet.
我想myclass在 css 样式表中添加可点击文本的所有实例。
回答by zzzzBov
Is it possible in my css file to do something like [see code above]?
是否可以在我的 css 文件中执行类似 [参见上面的代码] 的操作？
No
不
The important question to ask is why.
要问的重要问题是为什么。
HTMLhas control of the datawithin the webpage. Any CSS or JS is specified via the HTML. It's the Model.
HTML可以控制网页中的数据。任何 CSS 或 JS 都是通过 HTML 指定的。这是模型。
CSShas control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.
CSS可以控制样式，CSS 和 HTML 或 JavaScript 之间没有联系。这是视图。
JavaScripthas control of the interactionswithin the webpage, and has hooks to any and all DOM nodes. It's the Controller.
JavaScript可以控制网页内的交互，并具有与任何和所有 DOM 节点的挂钩。这是控制器。
Because of this MVC structure: HTML belongs in .htmlfiles, CSS belongs in .cssfiles, and JS belongs in .jsfiles.
因为这种MVC结构：HTML属于.html文件，CSS属于.css文件，JS属于.js文件。
CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.
CSS 伪元素不会创建 DOM 节点。JavaScript 无法直接访问 CSS 中定义的伪元素，也无法将事件附加到所述伪元素。
If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.
如果您有一个固定的结构，并且无法在 HTML 中添加生成新链接所需的额外内容，JavaScript 可以动态添加必要的新元素，然后可以通过 CSS 设置样式。
jQuery makes this very simple:
jQuery 使这变得非常简单：
$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);
回答by Zoltán Gergely Kis
If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:
如果可以使用 jQuery 完成某些事情，那么可以肯定的是，没有它也可以做到。让我们看一个数据模型：
<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>
We need some stylesheet:
我们需要一些样式表：
<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>
And a code:
和一个代码：
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>
回答by The Surrican
Well,
好，
using expresisonit might actually be possible for internet explorer only.
使用expresison实际上可能只适用于 Internet Explorer。
Otherwise:
除此以外：
No. Not at all, thats not what css is made and intendet for.
不。完全不是，这不是css的制作和意图。
回答by Tomas
回答by Gopal Bogati
No,but you can do like this
不，但你可以这样做
In html file add this section
在 html 文件中添加此部分
<div class="arrow">
</div>
In css you can do like this
在 css 中你可以这样做
.myclass div.arrow{
content:"click me";
onclick:"my_function()";
}
Hope it will help you
希望它会帮助你
