javascript - 如何检测浏览器中对省略号 (...) 的点击？

Question

看来没救了，因为省略号不在DOM中，只是浏览器的render trick

我问是因为我不是 html/css 大师，可能存在很多我不知道的神秘技巧......

Answer 1

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

...因此尝试使用 each jQuery 在每个 .ellipsis 类元素上附加一个 span。使用 position 对齐文本末尾的 span

...然后向该 span 添加一个点击事件

^{注意:我为那个 span 添加了背景色只是为了视觉}

堆栈片段

$(".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>