Click is an event, and it can be associated with an event listener, how to address when we double click and text get highlighted, how to pick up as an event?
Once it is done I want to accomplish something.
I think this is the answer → https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
But still puzzled about how to pic up that word where the double click has happened and how to ensure it is only text and nothing else.
Hi @codeispoetry, you can get the selected text (which, in case of a double click, would be just the single word) with window.getSelection():
window.adEventListener('dblclick', () => {
console.log(window.getSelection().toString())
})
I think if you select text with a double click, that selection can only be from a single text node anyway… but technically you might check if anchor and focus node are equal:
const selection = window.getSelection()
if (selection.anchorNode === selection.focusNode) {
// Do something
}
2 Likes
You have given me ample clues for forwarding motion. I will report to you once I am done, Thank you.
1 Like
Hi there @m3g4p0p
How are they managing here.
A relative-absolute positioning combination is needed. The absolute element should be inside the p tag to be its child ad then it can be absolute, but their div is lying below script and is failing relative-absolute position logically.
They’re just setting the element’s left and top with JS based on the mouse event’s pageX and pageY coordinates respectively… it’s here at line 439 ff.:
1 Like
var pNode;
window.addEventListener('dblclick', () => {
console.log(window.getSelection().toString());
pNode = window.getSelection().anchorNode.parentElement;
console.log(pNode);
alert(pNode.offsetTop);
alert(pNode.offsetLeft);
})
This alert is giving undefined. How can I get offsets of the text element clicked?
<div class="wrapper max-width">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Quod nihil cumque quia perspiciatis harum optio enim iure! Totam illo voluptates doloribus accusamus veritatis cum at accusantium mollitia iste eius, natus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Quod nihil cumque quia perspiciatis harum optio enim iure! Totam illo voluptates doloribus accusamus veritatis cum at accusantium mollitia iste eius, natus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Quod nihil cumque quia perspiciatis harum optio enim iure! Totam illo voluptates doloribus accusamus veritatis cum at accusantium mollitia iste eius, natus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Quod nihil cumque quia perspiciatis harum optio enim iure! Totam illo voluptates doloribus accusamus veritatis cum at accusantium mollitia iste eius, natus.</p>
</div>
I modified the code like this:
var pNode;
window.addEventListener('dblclick', () => {
console.log(window.getSelection().toString());
// pNode = window.getSelection().anchorNode.parentElement;
pNode = window.getSelection();
console.log(pNode);
// alert(pNode.offsetTop);
// alert(pNode.offsetLeft);
})
Still not sure which property to use.
Well getSelection() returns a selection, not a node – you’ll indeed have to get the anchor node’s parent element as in the commented out line above. Or, if you want to get the exact mouse coordinates, accept the event parameter which has pageX and pageY properties:
window.addEventListener('dblclick', event => {
console.log(event.pageX, event.pageY)
})
1 Like
I am creating a div why it is not appearing?
You haven’t added it to the page. You created it in JS but them you have to append it to something.
e.g.
nowYes.append(ndiv);
1 Like
Thanks, this could be also:
body.append(ndiv); ?
Sir, one more thing on the double click this div is created when doubled clicked event is unhighlighted how can I eliminate this div? Any toggle like syntax/function?
I’m not quite sure what you are asking?
You create and append a div when the wrapper is double clicked. What is the process required to remove the div?
Do you double click something else or do you double click the wrapper again?
Or are you double clicking a focusable element that you want to detect when focus is lost?
Once you have to decided to remove the element do you actually want it removed completely or just hidden so that it can be shown again without creating it again?
We really need to know the flow and use case for this to answer properly.
You could for example set a variable when double clicked and then use that variable the next time the element is double clicked to do something else (i.e. remove the element).
const nowYes = document.querySelector(".wrapper");
const body = document.querySelector("body");
var toggle = false;
nowYes.addEventListener('dblclick', event => {
console.log(event.pageX, event.pageY);
if(toggle === false){
let ndiv = document.createElement('div');
ndiv.classList.add('bar');
body.append(ndiv);
toggle = true;
} else {
var elem = document.querySelector(".bar");
elem.parentNode.removeChild(elem);
toggle = false;
}
})
1 Like
Sir, I am interested in achieving something like this →
on double click, some content: social media share buttons, for example, appears and then they disappear when double click effect is withdrawn when something else happens on the page.
The double click effect happens and then it’s gone. I’m guessing you would need to set up a series of events to listen for (such as keypress and highlighting and clicks and focus etc) and then remove the div when this happens.
Or maybe you could focus your new div and then when it loses focus you could remove it.
Just thinking out loud here:) You may be in need of a js expert 
1 Like
Yes, Thank you.
Maybe something like this:
I set tabindex -1 on the div and then set it to be focussed when created. When it loses focus it can be removed.
There’s probably a more elegant way to do this but I like to try anyway 
1 Like
True, sir.
I finally make some tweaks in your code and achieved this → https://codepen.io/codeispoetry/pen/gOGNNJX
1 Like
Sir, There is one more default behavior that when we click in the bottom scroll bar scrolls up. Is there a way to stop the scroll bar from scrolling upwards on the double click?