时间戳

首页 > 解决方案 > 双击单击事件时如何模拟突出显示文本

javascript - 双击单击事件时如何模拟突出显示文本

问题描述

当我双击文本时，我想模拟所选文本的突出显示操作，但只需单击一次事件。我该怎么做？我尝试使用这些代码但失败了

handleOnClick(event) {
  event.preventDefault();

  //i thought this suppose to trigger double click event 
  //and highlight the text under the mouse cursor
  event.target.dispatchEvent(new MouseEvent('dblclick', {bubbles:true}));

  //...
}

标签： javascripthtmlonclickondoubleclick

解决方案

您需要整个 div 元素还是只需要其中的一部分？这是在双击事件时突出显示整个 div 的解决方案。

HTML
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Highlight</title>
    </head>
    <body>
      <div id="text">Text to be highlighted</div>
    </body>
    </html>
CSS
    .highlight {
      background: yellow;
    }

JS
document.querySelector('#text')
  .addEventListener('dblclick', () => {
  document.querySelector('#text').classList.add('highlight');
});

推荐阅读