0

Como fazer para que tanto um elemento pai como um elemento filho sendo do tipo "span" capture os atributos para um evento do tipo modal, independente da hierarquia do span no texto?

Já tenho um texto que deveria abrir os diálogos ao clicar o trecho marcado, porém quando clico no filho, ele está abrindo o do pai:

   <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);
}

O que preciso é que quando eu clicar no filho de um elemento pai, ele abra o evento do elemento filho e não do pai.

 $(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, "  "));
});

Veja um Fiddle do exemplo onde ele faz o evento duas vezes quando clica no texto verde, mas na verdade, pra mim só aparece o primeiro evento. Ele deveria pegar somente o evento do filho.

1
  • Rapidamente verifiquei que está usando o ID do elemento para bindar o onclick, isso não funciona muito bem para múltiplos elementos da página que tenham o mesmo atributo, use a classe ao invés disso. Outra coisa, é melhor fazer um exemplo funcional do seu código, está muito poluído e difícil de entender. Commented 29/01/2019 às 16:48

1 Resposta 1

0

Descobri, bastava fazer um: event.stopPropagation()no evento de click.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .