CODEWITHSUNDEEP
jquery
Sushmita
Sushmita

Reputation: 41

Prevent click after clicking one time till user click on another button again

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.

$('#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;
	}
#textarea{
  height:100px;
  border:1px solid;
}
<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>

Upvotes: 2

Views: 72

Answers (1)

Arijit Jana
Arijit Jana

Reputation: 228

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>

Upvotes: 1

Related Questions