[英]How can I detect a click on ellipsis (…) in browser?
This will be a little tricky...It looks like you are using .ellipsis
class on ellipsis text... 这将有些棘手...看起来您在省略号文本上使用
.ellipsis
类...
...so try to append a span
on every .ellipsis
class element using each
jQuery. ...因此,尝试使用
each
jQuery在每个.ellipsis
类元素上附加一个span
。 Use position
to align that span
at end of text 使用
position
在文本末尾对齐该span
...and then add a click event to that span
...然后将点击事件添加到该
span
Note: I added a background color to that span
just for visual 注意:我为该
span
添加了背景色,只是为了视觉
Stack Snippet 堆栈片段
$(".ellipsis").each(function() { $(this).append("<span class='dots'></span>") }) $(document).on("click", ".dots", function() { console.log("ellipsis element is clicked"); })
p { width: 150px; border: 1px solid; font: 13px Verdana; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } span.dots { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: #ff000052; z-index: 99; cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
You cannot attach events to pseudo-content, and text overflow characters are pseudo-content, in the same way content rendered by ::before
and ::after
is pseudo-content. 您不能将事件附加到伪内容上,并且文本溢出字符是伪内容,就像通过
::before
和::after
呈现的内容是伪内容一样。
And like all pseudo-content, any clicks to it will trigger an event on the element to which it belongs. 与所有伪内容一样,对其的任何单击都会在它所属的元素上触发一个事件。
也许将事件侦听器添加到窗口中,然后检查鼠标单击是否具有与椭圆相同的x和y坐标?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.