Question

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

请看下面的代码（这是我到目前为止所做的，虽然它使用 jQuery ）。现在可以使用原生JavaScript（没有jQuery）吗？

对不起如果我问过一个愚蠢的问题，我对这些事情很陌生。：）

＆＃13;

<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>

＆＃13;

Answer 1

您的代码在 Jquery 中正常运行。
要获得“原生javascript”版本，请执行以下步骤：

用native替换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/

Answer 2

将jQuery转换为JavaScript代码非常简单，您已经做了很多困难。

var srcBox = document.querySelector（＆＃34; .sourceBox＆＃34;）;

srcBox.addEventListener（＆＃34; dblclick＆＃34;，hiLite，false）;

将内容包装在另一个容器（.sourceBox）中，因为处理多个事件侦听器的最有效方法是将一个事件侦听器放在所有event.target的父节点上（其中的元素）事件起源于或实际上只是实际点击过的元素。

if（e.target！== e.currentTarget）

即使event.target是pre个元素之一，但是监听器位于父级，我们仍然可以通过检查它是否找到正确的pre元素不事件链中的event.currentTarget（.sourceBox），因为它探测（并且不到event.currentTarget）和气泡（并且不到{{1} }）。由于事件监听器的event.currentTarget参数和放置在函数hiLite（事件处理程序）最后端的false

var text = e.target;

挑出正确的e.stopPropagation();，我们可以或多或少地使用event.target。我认为this在这种情况下this仍然.sourceBox在这种情况下无用，这就是我们使用event.target

正如您所看到的，这是许多人更喜欢jQuery而不是JavaScript的原因之一。我是一个受虐狂，所以我更喜欢JavaScript。

现在我语无伦次的乱哄哄让你彻底迷茫了，这里的 an article 比我能更好地解释它。

＆＃13;

var srcBox = document.querySelector(".sourceBox");

srcBox.addEventListener("dblclick", hiLite, false);

function hiLite(e) {
  if (e.target !== e.currentTarget) {
    var text = e.target;
    var 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);
    }
  }
   e.stopPropagation();
}

＆＃13;

  pre.highlight {
    border: 1px solid #ccc;
    padding: 10px;
  }
  .sourceBox {
    border: 2px inset #222;
    padding: 1px 15px;
  }

＆＃13;

<section class="sourceBox">
  <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>
</section>

＆＃13;

Answer 3

以下是在本机javascript中实现相同功能的代码：

<script type="text/javascript">
    function selectText(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
        }
    }
</script>

要使用上述功能，您可以使用以下HTML编写：

<div id="selectable" ondblclick="selectText('selectable')">This is a test div.</div>

Answer 4

对于pre或any标签，可以通过这个简单的代码选择该标签内的所有文本。它将使用黄色突出显示整个标记区域，并在单击时选择其中的文本。

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

JavaScript - 双击“预编码块”中的所有文本

4 个答案: