0
How to make both a parent element and a child element being of the "span" type capture the attributes for a modal type event, regardless of the span hierarchy in the text?
I already have a text that should open the dialogues by clicking the marked section, but when I click on the son, he is opening the father’s:
<div class="ql-editor-ready" id="editor_autoria">Ivan Ferrer.<br><br><br>Tesxto de teste para marcar.<br><br><br>Finalizando aqui.<br><br><br><span class="color hightcolor-4" data-id="15487793226465f131e31" id="mark_15487793226465f131e31" data-color="4" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 1" data-text="Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis! Quem manda na minha terra sou euzis! Casamentiss faiz malandris se pirulitá. Copo furadis é disculpa de bebadis, arcu quam euismod magna.
Detraxit consequat et quo n" title="texto 1" data-zindex="2" style="z-index: 2;" tooltip-trigger="none" uib-tooltip="texto 1">Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis! Quem manda na minha terra sou euzis! Casamentiss faiz malandris se pirulitá. Copo furadis é disculpa de bebadis, arcu quam euismod magna.
Detraxit consequat et quo n<i class="tabs tab-5"></i></span>um tendi nada. Aenean aliquam <span class="color hightcolor-2" data-id="15487793345955f131e32" id="mark_15487793345955f131e32" data-color="2" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 2" data-text="molestie leo, vitae iaculis nisl. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Per aumento de cachacis, eu reclamis." title="texto 2" data-zindex="3" style="z-index: 0;" tooltip-trigger="none" uib-tooltip="texto 2">molestie leo, vitae iaculis nisl. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Per aumento de cachacis, eu reclamis.<i class="tabs tab-2"></i></span><br><span class="color hightcolor-1" data-id="15487793421415f131e33" id="mark_15487793421415f131e33" data-color="1" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 3" data-text="Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Suco de cevadiss deixa as pessoas mais interessantis." title="texto 3" data-zindex="4" style="z-index: 0;" tooltip-trigger="none" uib-tooltip="texto 3">Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum. Tá deprimidis, eu conheço uma cachacis que pode alegra<span class="color hightcolor-5" data-id="15487793490705f131e34" id="mark_15487793490705f131e34" data-color="5" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 4" data-text="r sua vidis. Praesent malesuada u" title="texto 4" data-zindex="5" style="z-index: 5" tooltip-trigger="none" uib-tooltip="texto 4">r sua vidis. Praesent malesuada u<i class="tabs tab-1"></i></span>rna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Suco de cevadiss deixa as pessoas mais interessantis.<i class="tabs tab-1"></i></span><br>Viva Forevis aptent taciti sociosqu ad litora torquent. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis.<br></div>
CSS:
.ql-editor-ready .hightcolor-1,
.ql-editor-ready .hightcolor-2,
.ql-editor-ready .hightcolor-3,
.ql-editor-ready .hightcolor-4,
.ql-editor-ready .hightcolor-5,
.ql-editor .hightcolor-1,
.ql-editor .hightcolor-2,
.ql-editor .hightcolor-3,
.ql-editor .hightcolor-4,
.ql-editor .hightcolor-5 {
/*display: inline;*/
/*padding: 4px;*/
cursor: pointer;
position:relative;
}
.ql-editor-ready .hightcolor-1:hover,
.ql-editor-ready .hightcolor-2:hover,
.ql-editor-ready .hightcolor-3:hover,
.ql-editor-ready .hightcolor-4:hover,
.ql-editor-ready .hightcolor-5:hover,
.ql-editor .hightcolor-1:hover,
.ql-editor .hightcolor-2:hover,
.ql-editor .hightcolor-3:hover,
.ql-editor .hightcolor-4:hover,
.ql-editor .hightcolor-5:hover {
opacity:1;
position:relative;
z-index: 6000;
}
.color-options ul li {
float:left;
cursor: pointer;
}
.color-options .color {
padding: 15px;
display: flex;
border-radius: 80%;
margin: 10px;
}
.ql-editor-ready .color i.tabs {
position: relative;
z-index: 999999;
}
.ql-editor-ready .color>i.tabs:hover {
z-index:999999;
}
.ql-editor-ready .color i.tabs:after {
content:"";
position: absolute;
z-index: 1;
width: 24px;
font-size: 23px;
display: block;
top: -72%;
right: 0%;
/* margin-left: -110px; */
border-width: 6px;
border-style: solid;
/*border-color: #555 transparent transparent transparent;*/
transform: rotate(180deg);
opacity: .8;
}
.ql-editor-ready .color:hover i.tabs:after {
z-index:999;
}
.ql-editor-ready i.tabs:after:hover {
z-index:999;
}
.ql-editor-ready .color:hover:after {
opacity: 1;
}
.ql-editor-ready .color.hightcolor-1 i.tabs:after {
border-color: #b1c15d transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
.ql-editor-ready .color.hightcolor-2 i.tabs:after {
border-color: #c1796a transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
.ql-editor-ready .color.hightcolor-3 i.tabs:after {
border-color: #729bc1 transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
.ql-editor-ready .color.hightcolor-4 i.tabs:after {
border-color:#bd61c1 transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
.ql-editor-ready .color.hightcolor-5 i.tabs:after {
border-color:#61c184 transparent transparent transparent;
border-width: 6px;
border-style: solid;
}
.ql-editor-ready .color {
/*display: inline-flex;*/
font-size: 14px;
font-family: CircularBook, Circular, Effra, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.color-options .color.hightcolor-1,
.ql-editor-ready .hightcolor-1,
.ql-editor .hightcolor-1 {
background: #ecff71;
/*border: 1px solid #b1c15d;*/
opacity:.8;
}
.color-options .color.hightcolor-2,
.ql-editor-ready .hightcolor-2,
.ql-editor .hightcolor-2 {
background: #ffa18c;
/*border: 1px solid #c1796a;*/
opacity:.8;
}
.color-options .color.hightcolor-3,
.ql-editor-ready .hightcolor-3,
.ql-editor .hightcolor-3 {
background: #96ceff;
/*border: 1px solid #729bc1;*/
opacity:.8;
}
.color-options .color.hightcolor-4,
.ql-editor-ready .hightcolor-4,
.ql-editor .hightcolor-4 {
background: #fb8bff;
/*border: 1px solid #bd61c1;*/
opacity:.8;
}
.color-options .color.hightcolor-5,
.ql-editor-ready .hightcolor-5,
.ql-editor .hightcolor-5 {
background: #76ffb0;
/*border: 1px solid #61c184;*/
opacity:.8;
}
.color-options .color.hightcolor-1 {
border: 1px solid #b1c15d;
}
.color-options .color.hightcolor-2 {
border: 1px solid #c1796a;
}
.color-options .color.hightcolor-3 {
border: 1px solid #729bc1;
}
.color-options .color.hightcolor-4 {
border: 1px solid #bd61c1;
}
.color-options .color.hightcolor-5 {
border: 1px solid #61c184;
}
.color-options .color.active {
border-width: 2px;
box-shadow: 2px 2px 1px rgba(0,0, 0, .4);
}
What I need is that when I click on the child of a parent element, it opens the child element event and not the parent.
$(document)
.on('mouseover mouseenter hover', '#editor_autoria [data-id]', function(){
$(this).addClass('selected');
$(this).css('z-index', 9999999);
$(this).siblings('[data-id]').css('z-index', 0);
if($(this).parent().hasClass('color')) {
$(this).parent().removeClass('selected');
}
})
.on('mouseout mouseleave', '#editor_autoria [data-id]', function(){
$(this).removeClass('selected');
$(this).css('z-index', $(this).attr('data-zindex'));
if($(this).parent().hasClass('color')) {
$(this).removeClass('selected');
$(this).parent().css('opacity', '1');
}
var irmaos = $(this).siblings();
irmaos.css('z-index', irmaos.attr('data-zindex'));
});
$(document).on('click', '#editor_autoria [data-id].selected', function(event){
$(this).css('z-index', 9999999);
$(this).siblings('[data-id]').css('z-index', 0);
if($(this).parent().hasClass('color')) {
// $(this).parent().css('pointer-events', 'none');
$(this).css('pointer-events', 'auto');
}
var $target = {};
$target = this.dataset;
console.log($target);
console.log(JSON.stringify($target, null, " "));
});
See a Fiddle of the example where he does the event twice when he clicks on the green text, but in fact, for me only the first event appears. He should only take the child’s event.
I quickly found that you are using the element ID to bind onclick, this does not work very well for multiple page elements that have the same attribute, use the class instead. Another thing, it is better to make a functional example of your code, it is very polluted and difficult to understand.
– Giovan Cruz