数组中的重复元素-javascript
我一直在用javascript开发一个代码，您可以选择文本并将此选定文本添加到数组中。当我选择一个文本时，会显示一个工具提示按钮，用于将此文本添加到数组中。 但是，当我点击这个按钮时，对于每次迭代，它都会添加n倍于所选文本的内容，从而生成一个包含重复元素的数组 数组是选择的变量。 操作数组的代码如下所示：数组中的重复元素-javascript,javascript,arrays,Javascript,Arrays,我一直在用javascript开发一个代码，您可以选择文本并将此选定文本添加到数组中。当我选择一个文本时，会显示一个工具提示按钮，用于将此文本添加到数组中。 但是，当我点击这个按钮时，对于每次迭代，它都会添加n倍于所选文本的内容，从而生成一个包含重复元素的数组 数组是选择的变量。 操作数组的代码如下所示： $("#quote-place").click(function quote() { var txt = [null]; var txtSelected = window.ge
$("#quote-place").click(function quote() {
var txt = [null];
var txtSelected = window.getSelection();
var txtRange = txtSelected.toString();
if(txtRange.length >= 2) {
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
txt = document.getSelection();
} else if (document.selection) {
txt = document.selection.createRange().text;
}
selects.push('' + txt);
}
<html>
<head>
<style type="text/css">
#quote-place { position:absolute; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/JavaScript">
function snapSelectionToWord() {
var sel;
// Check for existence of window.getSelection() and that it has a
// modify() method. IE 9 has both selection APIs but no modify() method.
if (window.getSelection && (sel = window.getSelection()).modify) {
sel = window.getSelection();
if (!sel.isCollapsed) {
// Detect if selection is backwards
var range = document.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);
var backwards = range.collapsed;
range.detach();
// modify() works on the focus of the selection
var endNode = sel.focusNode, endOffset = sel.focusOffset;
sel.collapse(sel.anchorNode, sel.anchorOffset);
var direction = [];
if (backwards) {
direction = ['backward', 'forward'];
} else {
direction = ['forward', 'backward'];
}
sel.modify("move", direction[0], "character");
sel.modify("move", direction[1], "word");
sel.extend(endNode, endOffset);
sel.modify("extend", direction[1], "character");
sel.modify("extend", direction[0], "word");
}
} else if ( (sel = document.selection) && sel.type != "Control") {
var textRange = sel.createRange();
if (textRange.text) {
textRange.expand("word");
// Move the end back to not include the word's trailing space(s),
// if necessary
while (/\s$/.test(textRange.text)) {
textRange.moveEnd("character", -1);
}
textRange.select();
}
}
}
var selects = new Array();
selects.push("1");
$(document).ready(function() {
var selectionImage;
$('#element').mouseup(function(e) {
if (!selectionImage) {
selectionImage = $('<button>').attr({
type: 'button',
title: 'Citar Texto seleccionado',
id: 'quote-place'
}).html("Add").css({
"color": "red"
}).hide();
$(document.body).append(selectionImage);
}
$("#quote-place").click(function quote() {
var txt = [null];
var txtSelected = window.getSelection();
var txtRange = txtSelected.toString();
if(txtRange.length >= 2) {
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
txt = document.getSelection();
} else if (document.selection) {
txt = document.selection.createRange().text;
}
selects.push('' + txt);
}
document.menu.selectedtext.value = selects;
}).mousedown(function() {
if (selectionImage) {
selectionImage.fadeOut();
}
});
selectionImage.css({
top: e.pageY - 30,
//offsets
left: e.pageX - 13 //offsets
}).fadeIn();
});
});
</script>
</head>
<body>
<div id="element" class="element" onmouseup="snapSelectionToWord()">
Hello <b>her</b>e is some <i>nice text</i> Please try selecting some
<p>Amet elementum, platea porta. Magna eros, pid velit? Pid urna nunc ut, amet duis ultrices vut ac nec mus phasellus tincidunt. Et penatibus augue. Proin ac urna, quis arcu ultrices, ut nunc! Ultrices et hac integer rhoncus a placerat sit? Auctor tristique tincidunt augue amet?</p>
</div>
<br><br>
<form class="menu" name="menu">
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>
</body>
</html>
问题出在mouseUp$'element'的函数内部。mouseupffunction您已经为其他操作插入了侦听器 $quote-place。单击函数quote 每次鼠标移动时，都会注册一个新的侦听器，以便引用place div，因此第二次有两个侦听器，第三次有三个，依此类推。您需要将其移出mouseUp函数 一种可能的不同方法是，因为您是以动态方式添加元素，所以使用
document.getElementById("quote-place").removeEventListener("click", quote, true);
document.getElementById("quote-place").addEventListener("click", quote, true);
while背后的深层含义是什么i@baao，对不起，我这段时间忘记退休了。我在这里发布代码之前进行了测试。我现在编辑。感谢您的关注我将该功能从mouseup功能中移出，但不起作用。工具提示按钮不会出现。有什么想法吗？@Marcel I用一个工作片段和一个可能的解决方案更新了答案