如何在不牺牲性能的情况下有效检测文本中点击的单词?
Oct 26, 2024 pm 03:49 PM通过优化检测点击的单词
为了增强用户与文本的交互,需要检测用户点击的单词。为了解决这个问题,一种解决方案涉及使用 jQuery 进行广泛的类解析,从而产生缓慢且视觉上不吸引人的用户体验。为了寻求更优雅的方法,让我们深入研究改进的解决方案。
以下 JavaScript 代码提供了一种简化的方法来实现单词检测,而不会因不必要的跨度而使文档混乱:
<code class="js">$(".clickable").click(function(e){ s = window.getSelection(); var range = s.getRangeAt(0); var node = s.anchorNode; // Find starting point while(range.toString().indexOf(' ') != 0) { range.setStart(node,(range.startOffset -1)); } range.setStart(node, range.startOffset +1); // Find ending point do{ range.setEnd(node,range.endOffset + 1); }while(range.toString().indexOf(' ') == -1 &amp;&amp; range.toString().trim() != ''); // Alert result var str = range.toString().trim(); alert(str); });</code>
登录后复制
在HTML 文档,用“clickable”类标识文本块:
<code class="html"><p class="clickable"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu. </p></code>
登录后复制
使用此代码,您可以检测页面任何部分上的单击单词,这提供了更自然的用户交互,而不会影响性能.
以上是如何在不牺牲性能的情况下有效检测文本中点击的单词?的详细内容。更多信息请关注PHP中文网其他相关文章!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林

热门文章
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)