JavaScript - 双击选择 ‘pre code block’ 内的所有文本

Question

我的博客上有一些代码块；我希望当有人双击代码块时，需要选择该代码块的所有代码。

请看下面的代码(这是我到目前为止得到的代码，尽管它使用的是 jQuery)。现在是否可以使用原生 JavaScript(没有 jQuery)？

抱歉，如果我问了一个愚蠢的问题，我是新手。 :)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
pre.highlight {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // select all code on doubleclick
    $('pre.highlight').dblclick(function() {
        $(this).select();

        var text = this,
            range, selection;

        if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
});
</script>
<pre class="highlight"><code>.button-css {
    cursor: pointer;
    border: none;
    background: #F2861D;
    padding: 3px 8px;
    margin: 7px 0 0;
    color: #f4f4f4;
}</code></pre>
<pre class="highlight"><code> #slider {
     border-color: #c0c0c0;
     border-radius: 5px 5px 5px 5px;
     border-style: solid;
 }</code></pre>

Answer 1

您的代码在 Jquery 中运行良好。
要获取“原生 javascript”版本，请执行以下步骤:

• 用原生替换 jquery 的 $(document).ready 处理程序window.onload
• 使用事件目标 e.target 而不是 jquery 的 this

• 而不是为每个元素添加一个事件处理程序class="highlight" 使用高级技术添加事件监听父元素一次，只考虑需要的 pre 或code元素(与class="highlight"相关)

  window.onload = function(){
  
      document.body.addEventListener('dblclick', function(e){
         var target = e.target || e.srcElement;        
         if (target.className.indexOf("highlight") !== -1 || target.parentNode.className.indexOf("highlight") !== -1){
              var range, selection;
  
              if (document.body.createTextRange) {
                  range = document.body.createTextRange();
                  range.moveToElementText(target);
                  range.select();
              } else if (window.getSelection) {
                  selection = window.getSelection();
                  range = document.createRange();
                  range.selectNodeContents(target);
                  selection.removeAllRanges();
                  selection.addRange(range);
              }
              e.stopPropagation();
         }              
  
      });
  };
  

https://jsfiddle.net/8nba46x8/