我的博客上有一些代码块；我希望当有人双击代码块时，需要选择该代码块的所有代码。
请看下面的代码（这是我到目前为止所得到的，尽管它使用的是jQuery). Now 是否可以使用本机 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>
你的代码工作正常Jquery.
要获取“本机 javascript”版本，请执行以下步骤：
- 替换 jquery 的
$(document).ready具有本机的处理程序window.onload
- 使用事件目标
e.target而不是 jquery 的this
-
而不是为每个元素添加事件处理程序class="highlight"使用先进的技术添加事件
监听父元素一次并考虑只需要pre or
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/ https://jsfiddle.net/8nba46x8/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
