请看这把小提琴:http://jsfiddle.net/ZWw3Z/5/
我的代码是:
p {
position: relative;
background-color: blue;
}
p:before {
content: '';
position: absolute;
left:100%;
width: 10px;
height: 100%;
background-color: red;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>
我想只在伪元素(红色位)上触发一个单击事件。也就是说，我不希望在蓝色位上触发单击事件。
在没有JQuery的情况下，我使用了这个工具条菜单检测伪加号图标:
HTML:
<ul>
<li>MENU ELEMENT</li>
<li>MENU ELEMENT</li>
<li>MENU ELEMENT</li>
</ul>
CSS:
ul { margin: 30px; }
li { display: flex; width: 300px; justify-content: space-between;}
li:after { content: ' +'}
li.c1 { background: red; }
li.c2:after { background: yellow; }
JS:
document.querySelectorAll("li").forEach(function (e) {
e.addEventListener('click', function(u) {
let linkWidth = this.offsetWidth;
let pseudoWidth = parseFloat(window.getComputedStyle(this, ':after').width);
const mouseX = u.offsetX;
if (mouseX > (linkWidth - pseudoWidth)) {
console.log ("click pseudo");
this.className = 'c2';
} else {
console.log ("click element");
this.className = 'c1';
}
})
});
这是由Fasoeu用最新的CSS3和JS ES6编辑的答案
编辑的演示没有使用JQuery。
最短的代码示例:
<p><span>Some text</span></p>
p {
position: relative;
pointer-events: none;
}
p::before {
content: "";
position: absolute;
pointer-events: auto;
}
p span {
display: contents;
pointer-events: auto;
}
const all_p = Array.from(document.querySelectorAll('p'));
for (let p of all_p) {
p.addEventListener("click", listener, false);
};
解释:
pointer-events control detection of events, removing receiving events from target, but keep receiving from pseudo-elements make possible to click on ::before and ::after and you will always know what you are clicking on pseudo-element, however if you still need to click, you put all content in nested element (span in example), but because we don't want to apply any additional styles, display: contents; become very handy solution and it supported by most browsers. pointer-events: none; as already mentioned in original post also widely supported.
JavaScript部分还使用了广泛支持的Array.from和for…的，但是在代码中不需要使用它们。
在没有JQuery的情况下，我使用了这个工具条菜单检测伪加号图标:
HTML:
<ul>
<li>MENU ELEMENT</li>
<li>MENU ELEMENT</li>
<li>MENU ELEMENT</li>
</ul>
CSS:
ul { margin: 30px; }
li { display: flex; width: 300px; justify-content: space-between;}
li:after { content: ' +'}
li.c1 { background: red; }
li.c2:after { background: yellow; }
JS:
document.querySelectorAll("li").forEach(function (e) {
e.addEventListener('click', function(u) {
let linkWidth = this.offsetWidth;
let pseudoWidth = parseFloat(window.getComputedStyle(this, ':after').width);
const mouseX = u.offsetX;
if (mouseX > (linkWidth - pseudoWidth)) {
console.log ("click pseudo");
this.className = 'c2';
} else {
console.log ("click element");
this.className = 'c1';
}
})
});
