英文:
Prevent click after clicking one time till user click on another button again
问题
我已经创建了一个可编辑的div和一个名为'trend'的按钮。当用户点击按钮时，它将更改光标为帮助，并且每当用户右键单击或双击内容可编辑的div内的任何文本时，该文本将显示在另一个div中，所有这些操作都将在点击'trend'按钮后发生。
当用户选择文本后，他必须再次点击'trend'按钮以选择另一段文本。基本上一次只能选择一段文本。但是在我的代码中，双击多次后，单击一次'trend'按钮后会选择多段文本。
我需要在点击'trend'按钮后一次只选择一段文本。要选择另一段文本，用户必须再次点击'trend'按钮，然后双击文本。
以下是我用于更好理解的代码：
<!-- language: lang-js -->
$('#popup_button').on("click", function(e){
e.preventDefault();
$("#textarea").css("cursor", "help");
$("#textarea").mousedown(function(e){
if (e.which === 3){
e.preventDefault();
document.getElementById("textarea").addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
var text = getSelectionText(e);
//console.log(text);
$('.show_popupmenu').css('display', 'block');
$('.show_popupmenu').css('left',e.pageX); // <<< use pageX and pageY
$('.show_popupmenu').css('top',e.pageY);
$('.show_popupmenu').css('display','inline');
$(".show_popupmenu").css("position", "absolute");
}
if (e.which === 1) {
$('.show_popupmenu').css('display', 'none');
}
});
$("#textarea").dblclick(function(e){
e.preventDefault();
$('#textarea').css('cursor', 'auto');
$('.show_popupmenu').css('display', 'none');
var text = getSelectionText();
//console.log(text);
if(text !== ''){
//console.log(text);
$(".selected_trend").append('<div class="trends" id="trend'+text+'" data-text="'+text+'" style="width:auto; height:auto; display:inline-block;">'+text+'<p class="removetrend" data-id="'+text+'" style="display:inline-block; cursor:pointer;">×</p></div>');
}
})
});
$(document).on('click','.removetrend', function(e){
e.preventDefault();
$(this).parent().remove();
});
function getSelectionText(){
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
<!-- language: lang-css -->
#textarea{
height:100px;
border:1px solid;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div contenteditable="true" data-maxlength="50" id="textarea" class="editable" data-placeholder="Type here..."></div>
<div class="selected_trend"></div>
<div class="popupbtn">
<button id="popup_button">Select Trend</button>
</div>
</body>
</html>
请注意，我只提供了代码的翻译部分，不包括其他内容。
英文:
I have made a contenteditable div and a button 'trend' after it when user clicks on a button it will change the cursor to help and whenever user right click or double click on any text inside contenteditable div that text will show in another div, this all thing will happen only after clicking the trend button.
when user selected the text then he have to click on trend button again to select another text. basically one text at a time. but in my code on double clicking multiple times it is selecting multiple text after clicking once on trend button.
I have to select one text at a time after clicking trend button, for selecting another text user have to click on trend button again and then double click on text.
here is my code for better understanding.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#popup_button').on("click", function(e){
e.preventDefault();
$("#textarea").css("cursor", "help");
$("#textarea").mousedown(function(e){
if (e.which === 3){
e.preventDefault();
document.getElementById("textarea").addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
var text = getSelectionText(e);
//console.log(text);
$('.show_popupmenu').css('display', 'block');
$('.show_popupmenu').css('left',e.pageX); // <<< use pageX and pageY
$('.show_popupmenu').css('top',e.pageY);
$('.show_popupmenu').css('display','inline');
$(".show_popupmenu").css("position", "absolute");
}
if (e.which === 1) {
$('.show_popupmenu').css('display', 'none');
}
});
$("#textarea").dblclick(function(e){
e.preventDefault();
$('#textarea').css('cursor', 'auto');
$('.show_popupmenu').css('display', 'none');
var text = getSelectionText();
//console.log(text);
if(text !== ''){
//console.log(text);
$(".selected_trend").append('<div class="trends" id="trend'+text+'" data-text="'+text+'" style="width:auto; height:auto; display:inline-block;">'+text+'<p class="removetrend" data-id="'+text+'" style="display:inline-block; cursor:pointer;">&times</p></div>');
}
})
});
$(document).on('click','.removetrend', function(e){
e.preventDefault();
$(this).parent().remove();
});
function getSelectionText(){
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
<!-- language: lang-css -->
#textarea{
height:100px;
border:1px solid;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div contenteditable="true" data-maxlength="50" id="textarea" class="editable" data-placeholder="Type here..."></div>
<div class="selected_trend"></div>
<div class="popupbtn">
<button id="popup_button">Select Trend</button>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
以下是翻译好的代码部分：
<script type="text/javascript">
$('#popup_button').on("click", function(e){
$("#popup_button").attr('data-clicked',true);
e.preventDefault();
$("#textarea").css("cursor", "help");
$("#textarea").mousedown(function(e){
if (e.which === 3){
e.preventDefault();
document.getElementById("textarea").addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
var text = getSelectionText(e);
$('.show_popupmenu').css('display', 'block');
$('.show_popupmenu').css('left',e.pageX); // <<< use pageX and pageY
$('.show_popupmenu').css('top',e.pageY);
$('.show_popupmenu').css('display','inline');
$(".show_popupmenu").css("position", "absolute");
}
if (e.which === 1) {
$('.show_popupmenu').css('display', 'none');
}
});
$("#textarea").dblclick(function(e){
e.preventDefault();
$('#textarea').css('cursor', 'auto');
$('.show_popupmenu').css('display', 'none');
var text = getSelectionText();
if(text !== ''){
if($("#popup_button").attr('data-clicked')=='true'){
$(".selected_trend").append('<div class="trends" id="trend'+text+'" data-text="'+text+'" style="width:auto; height:auto; display:inline-block;">'+text+'<p class="removetrend" data-id="'+text+'" style="display:inline-block; cursor:pointer;">×</p></div>');
$("#popup_button").attr('data-clicked',false);
}
}
});
});
$(document).on('click','.removetrend', function(e){
e.preventDefault();
$(this).parent().remove();
});
function getSelectionText(){
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
</script>
希望这有所帮助！
英文:
The jquery will be like this:
<script type="text/javascript">
$('#popup_button').on("click", function(e){
$("#popup_button").attr('data-clicked',true);
e.preventDefault();
$("#textarea").css("cursor", "help");
$("#textarea").mousedown(function(e){
if (e.which === 3){
e.preventDefault();
document.getElementById("textarea").addEventListener("contextmenu", function (e) {
e.preventDefault();
}, false);
var text = getSelectionText(e);
//console.log(text);
$('.show_popupmenu').css('display', 'block');
$('.show_popupmenu').css('left',e.pageX); // <<< use pageX and pageY
$('.show_popupmenu').css('top',e.pageY);
$('.show_popupmenu').css('display','inline');
$(".show_popupmenu").css("position", "absolute");
}
if (e.which === 1) {
$('.show_popupmenu').css('display', 'none');
}
});
$("#textarea").dblclick(function(e){
e.preventDefault();
$('#textarea').css('cursor', 'auto');
$('.show_popupmenu').css('display', 'none');
var text = getSelectionText();
//console.log(text);
if(text !== ''){
if($("#popup_button").attr('data-clicked')=='true'){
//console.log(text);
$(".selected_trend").append('<div class="trends" id="trend'+text+'" data-text="'+text+'" style="width:auto; height:auto; display:inline-block;">'+text+'<p class="removetrend" data-id="'+text+'" style="display:inline-block; cursor:pointer;">&times</p></div>');
$("#popup_button").attr('data-clicked',false);
}
}
});
});
$(document).on('click','.removetrend', function(e){
e.preventDefault();
$(this).parent().remove();
});
function getSelectionText(){
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论