如何在浏览器中检测省略号（...）的点击？

Question

似乎毫无希望，因为省略号不在DOM中，它只是浏览器的渲染技巧

我在问，因为我不是一个html / css大师，所以很多ezoteric技巧可能存在我不知道......

Answer 1

这会有点棘手......看起来你在省略号文本上使用.ellipsis类......

...所以尝试使用span jQuery在每个.ellipsis类元素上附加each。使用position将span与文字末尾对齐

...然后向该span

添加点击事件

^{注意：我为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>

Answer 2

您不能将事件附加到伪内容，文本溢出字符是伪内容，就像::before和::after呈现的内容是伪内容一样。

与所有伪内容一样，对它的任何点击都会触发它所属元素的事件。

Answer 3

也许在窗口中添加一个事件监听器并检查鼠标点击是否具有与椭圆相同的x和y坐标？