***Working
When i right click on the chat item then it run a function test_delete(e) for target element and context menu shows and store chat id in variable x.
when we click on delete then it shows the id of target chat.
works fine for now.
Problem
If i click on a chat 10 times or more than 1 time
and then i click on delete from context menu then the delete button function returns chat id per click on chat
but i want it return only single chat id
Example: if i click on chat 10 time but click delete button 1 time then it return chat id of last target chat 10 times
1 want it return chat id only 1 time
if You dont understant my question then run snippet and view console
How can i fix this problem….
<!--Context Menu-->
<div class="TestClass" id="m">
<p class="innerP0">
<input id="dummy" type="text" value="">
<a class="context-item" id="Tex">Delete</a>
<a class="context-item" id="EDIT">Edit...</a>
<a class="context-item" id="forward">Forward</a>
<a class="context-item" id="copy">Copy</a>
<a class="context-item" id="copy">Select</a>
</p>
</div>
<p id="dM"></p>
<!--Html Elements of same class name-->
<div class="to123f">
<div class="from Text_chat" oncontextmenu="return false;">
<input class="chatId" type="hidden" value="263">
<span class="chatf_time">2022-01-16 21:32:37</span>
<p id="message_detail" class="chat_text fromuser">fgdfg</p>
</div>
</div>
<div class="to123f">
<div class="from Text_chat" oncontextmenu="return false;">
<input class="chatId" type="hidden" value="264">
<span class="chatf_time">2022-01-16 21:32:37</span>
<p id="message_detail" class="chat_text fromuser">dffdg</p>
</div>
</div>
<div class="to123f">
<div class="from Text_chat" oncontextmenu="return false;">
<input class="chatId" type="hidden" value="266">
<span class="chatf_time">2022-01-16 21:32:37</span>
<p id="message_detail" class="chat_text fromuser">
asad
</p>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
//CHAT CONTEXT MENU FOR Desktop
function test_delete(e){
let menu = document.getElementById('m');
let mes = document.getElementById('dM');
menu.style.display = "block";
y = e.currentTarget;
let check_user = e.currentTarget.className;
if (check_user == 'to') {
// alert("You Click on " + check_user);
}
// console.log(e.currentTarget.className);
x = y.querySelector('input').value;
// console.log(e);
if(e.pageX == undefined){
var posX = e.changedTouches[0].pageX;
var posY = e.changedTouches[0].pageY;
}
else{
var posX = e.pageX;
var posY = e.pageY;
}
var menuWidth = menu.offsetWidth;
var menuHeight = menu.offsetHeight;
var totalWidth = window.innerWidth;
var totalHeight = window.innerHeight;
if ((totalWidth - posX) < menuWidth) {
menu.style.left = posX - menuWidth + "px";
//console.log("ifX = ");
} else {
menu.style.left = posX + 5 + "px";
// console.log("elseX = ");
}
if ((totalHeight - posY) < menuHeight) {
menu.style.top = posY - menuHeight + "px"
// console.log("ifY = ");
} else {
menu.style.top = posY + "px";
// console.log("elseY = ");
}
var contextItem = document.getElementsByClassName('context-item');
var contextLength = contextItem.length;
var i= 0;
for(i;i<contextLength;i++){
contextItem[i].addEventListener('click', function(){menu.style.display='none';
})
}
window.onclick = function(e) {
if(!e.target.matches.menu){
menu.style.display = "none";
}
}
//console.log(inner);
menu.querySelector('#Tex').addEventListener("click", function() {
let data = `id=${x}`;
console.log(data);
});
}
//CHAT CONTEXT MENU FOR TOUCH DEVICES
function mobileContext(){
var chatBody = document.getElementsByClassName('from');
// console.log('ChatBody = '+chatBody);
var chatBodyLength = chatBody.length;
var i=0;
var delay = 500;
var holdStarter = null;
var holdActive = false;
for(i;i<chatBodyLength;i++){
chatBody[i].addEventListener('touchstart' , TouchStart);
chatBody[i].addEventListener('touchend' , TouchEnd);
chatBody[i].addEventListener('auxclick' , test_delete);
}
function TouchStart(){
holdStarter = setTimeout(function() {
holdStarter = null;
holdActive = true;
}, delay);
}
function TouchEnd(e){
if (holdStarter) {
clearTimeout(holdStarter);
// run click-only operation here
// console.log('Clicked!');
}else
if(holdActive == true){
// console.log('Hold Active');
holdActive = false;
test_delete(e);
}
}
}
mobileContext();
<!-- language: lang-css -->
.TestClass {
/* left: -89px; */
position: absolute;
width: 140px;
background: #ffffff;
z-index: 1000;
/* border: 1px solid green; */
box-shadow: 4px 4px 10px -3px #00000024;
display: ;
border: 1px solid #dbdee7;
}
p.innerP0 a:last-child {
border: 0;
}
p.innerP0 a {
text-decoration: none;
color: gray;
padding: 5px 15px;
font-size: 11px;
border:none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
p.innerP0 {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 4px 0px !important;
}
p.innerP0 a:hover {
background: #c9c9c9;
}
#dM {
padding: 5px 15px;
border-radius: 20px;
background: #4849a1;
color: #fff;
font: 300 12px/1 'open sans';
width: fit-content;
text-align: center;
position: fixed;
left: 0;
right: 0;
bottom: -40px;
margin: auto;
transition: .5s ease;
}
.to123f {
display: flex;
justify-content: flex-end;
position: relative;
}
.to123f p {
padding: 12px 10px;
}
.to123f p {
font-size: 13px;
-webkit-user-select: none; -webkit-touch-callout: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
user-select: none;
}
.from{
background:gray;
margin-bottom:20px;
}
<!-- language: lang-html -->
<!--Context Menu-->
<div class="TestClass" id="m">
<p class="innerP0">
<a class="context-item" id="Tex">Delete</a>
<a class="context-item" id="EDIT">Edit...</a>
<a class="context-item" id="forward">Forward</a>
<a class="context-item" id="copy">Copy</a>
<a class="context-item" id="copy">Select</a>
</p>
</div>
<p id="dM">
</p>
<!--Html Elements of same class name-->
<div class="to123f">
<div class="from Text_chat" oncontextmenu="return false;">
<input class="chatId" type="hidden" value="263">
<span class="chatf_time">2022-01-16 21:32:37</span>
<p id="message_detail" class="chat_text fromuser">fgdfg</p>
</div>
</div>
<div class="to123f">
<div class="from Text_chat" oncontextmenu="return false;">
<input class="chatId" type="hidden" value="264">
<span class="chatf_time">2022-01-16 21:32:37</span>
<p id="message_detail" class="chat_text fromuser">dffdg</p>
</div>
</div>
<div class="to123f">
<div class="from Text_chat" oncontextmenu="return false;">
<input class="chatId" type="hidden" value="266">
<span class="chatf_time">2022-01-16 21:32:37</span>
<p id="message_detail" class="chat_text fromuser">
asad
</p>
</div>
</div>