locked
Stop child element to respond click function of the parent RRS feed

  • Question

  • User283528319 posted
                    <div class="card-header" data-toggle="collapse" data-target="#EvrakBilgileri">
                        <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
                        <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>
                        <div class="float-right"><button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
                    </div>

    Hi all,

    At the code above my child elements also trigger data-toggle event. <g class="gr_ gr_80 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="80" data-gr-id="80">However</g> I don't want this. how can I stop <g class="gr_ gr_146 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="146" data-gr-id="146">chidren</g> to respond parent's function?

    Saturday, January 12, 2019 8:10 PM

All replies

  • User-474980206 posted

    that's the way events work in the browser. they bubble up from the child to the parent all the way to the body. not sure your issue, but the child can use the x/y pos in the event to determine if the click is outside itself and ignore the event. also the child event handle can cancel propagation of the event to its parents.

    Saturday, January 12, 2019 9:54 PM
  • User1520731567 posted

    Hi fatihbarut,

    At the code above my child elements also trigger data-toggle event. However I don't want this. how can I stop chidren to respond parent's function?

    If you don't want to trigger the click function, you could delete the trigger conditions directly.

    Like:

    <div class="card-header" data-toggle="collapse" data-target="#EvrakBilgileri">
                        <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
                        <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>
                        <div class="float-right"><button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
                    </div>

    You could test the effect here:

    https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_simple&stacked=h

    Best Regards.

    Yuki Tao

    Monday, January 14, 2019 8:51 AM
  • User283528319 posted

    If you don't want to trigger the click function, you could delete the trigger conditions directly.

    I want it <g class="gr_ gr_114 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="114" data-gr-id="114">trigger</g> in card header but not in button which is in the card <g class="gr_ gr_108 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="108" data-gr-id="108">header</g>. Therefore deleting it is not an option

    Monday, January 14, 2019 9:34 AM
  • User1520731567 posted

    Hi fatihbarut,

    I want it trigger in card header but not in button which is in the card header. Therefore deleting it is not an option

    Sorry for the misunderstand what you meant before.

    I suggest you could change the scope of the div:

             <div class="card-header" data-toggle="collapse" data-target="#EvrakBilgileri">
                        <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
                        <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
              </div>
                    
                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>  
                        <div class="float-right">
                        <button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
    

    Like the picture:

    If you need to put buttons and other tags together,I suggest you build another big div.

    Best Regards.

    Yuki Tao

    Friday, January 18, 2019 10:17 AM
  • User283528319 posted

    Yuki Tao

    Hi fatihbarut,

    fatihbarut

    I want it trigger in card header but not in button which is in the card header. Therefore deleting it is not an option

    Sorry for the misunderstand what you meant before.

    I suggest you could change the scope of the div:

             <div class="card-header" data-toggle="collapse" data-target="#EvrakBilgileri">
                        <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
                        <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
              </div>
                    
                        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>  
                        <div class="float-right">
                        <button class="btn btn-info" id="YeniEvrak">Yeni</button></div>

    Like the picture:

    If you need to put buttons and other tags together,I suggest you build another big div.

    Best Regards.

    Yuki Tao

    thanks but I want buttons to be in the header which  beautifies the page and saves lots of space  that I need

    Friday, January 18, 2019 10:59 AM
  • User475983607 posted

    The following HTML should work if I understand the issue.

    <div class="card-header">
        <div  data-toggle="collapse" data-target="#EvrakBilgileri">
            <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
            <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
        </div>
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>
        <div class="float-right"><button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
    </div>

    Friday, January 18, 2019 4:29 PM
  • User283528319 posted

    The following HTML should work if I understand the issue.

    <div class="card-header">
        <div  data-toggle="collapse" data-target="#EvrakBilgileri">
            <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
            <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
        </div>
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>
        <div class="float-right"><button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
    </div>

    nope, they still aren't in the card <g class="gr_ gr_34 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="34" data-gr-id="34">header</g>.

    Friday, January 18, 2019 7:48 PM
  • User475983607 posted

    nope, they still aren't in the card header.

    Can you clarify the requirement as the buttons are clearly within the card-header div.

    <div class="card-header">
        <div  data-toggle="collapse" data-target="#EvrakBilgileri">
            <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
            <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
        </div>
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>
        <div class="float-right"><button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
    </div>

    Friday, January 18, 2019 9:20 PM
  • User283528319 posted

    mgebhard

    fatihbarut

    nope, they still aren't in the card header.

    Can you clarify the requirement as the buttons are clearly within the card-header div.

    <div class="card-header">
        <div  data-toggle="collapse" data-target="#EvrakBilgileri">
            <h5 class="text-primary"> Evraka Ait Bilgiler</h5>
            <input class="form-control mr-sm-2" type="text" placeholder="VNTS No">
        </div>
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>
        <div class="float-right"><button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
    </div>

    here is the final card header look with image-buttons 

    https://ibb.co/bBSYtpd

    Saturday, January 19, 2019 5:08 AM
  • User1520731567 posted

    Hi fatihbarut,

    According to your picture,You could add css to make these tags inline,like:

      <div class="card-header" data-toggle="collapse" data-target="#EvrakBilgileri" style="display:inline">
                        <h5 class="text-primary" style="display:inline"> Evraka Ait Bilgiler</h5>
                        <input class="mr-sm-2" type="text" style="display:inline" placeholder="VNTS No">
              </div>
                    
                        <button style="display:inline" class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>  
                        <div class="float-right" style="display:inline">
                        <button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
                
                        
    <div id="EvrakBilgileri" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>

    How it works:

    Best Regards.

    Yuki Tao

    Tuesday, January 22, 2019 10:16 AM
  • User283528319 posted

    <g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="16" data-gr-id="16">Hi</g> <g class="gr_ gr_11 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="11" data-gr-id="11">fatihbarut</g>,

    According to your picture<g class="gr_ gr_17 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="17" data-gr-id="17">,You</g> could add <g class="gr_ gr_10 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="10" data-gr-id="10">css</g> to make these tags inline<g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="18" data-gr-id="18">,like</g>:

      <div class="card-header" data-toggle="collapse" data-target="#EvrakBilgileri" style="display:inline">
                        <h5 class="text-primary" style="display:inline"> Evraka Ait Bilgiler</h5>
                        <input class="mr-sm-2" type="text" style="display:inline" placeholder="VNTS No">
              </div>
                    
                        <button style="display:inline" class="btn btn-secondary my-2 my-sm-0" type="submit">Çağır</button>  
                        <div class="float-right" style="display:inline">
                        <button class="btn btn-info" id="YeniEvrak">Yeni</button></div>
                
                        
    <div id="EvrakBilgileri" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>

    How it works:

    Best Regards.

    Yuki Tao

    I am sorry, buttons are still not in the header.

    Tuesday, January 22, 2019 11:05 AM
  • User475983607 posted

    We'll need all the relevant HTML, CSS, JS, and expected results as the example code are physically within the card header.  Include any layout templates you might be using.  We cannot reproduce the issue without the HTML, CSS, and JS.

    Otherwise, use your browser's dev tools (F12) to view the styles applied to the elements in the page.

    Tuesday, January 22, 2019 11:58 AM
  • User283528319 posted

    We'll need all the relevant HTML, CSS, JS, and expected results as the example code are physically within the card <g class="gr_ gr_46 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="46" data-gr-id="46">header</g>.  Include any layout templates you might be using.  We cannot reproduce the issue without the HTML, CSS, and JS.

    Otherwise, use your browser's dev tools (F12) to view the styles applied to the elements in the page.

    there is no <g class="gr_ gr_52 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="52" data-gr-id="52">css</g> or js beside bootstrap and I <g class="gr_ gr_77 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="77" data-gr-id="77">alreasy</g> sent html

    Tuesday, January 22, 2019 12:10 PM
  • User475983607 posted

    there is no css or js beside bootstrap and I alreasy sent html

    We cannot reproduce the issue.  That points to code outside the posted snippet affecting the layout.  If you are not willing to post all the relevant code to reproduces the issue on out end,  then you'll need to use standard debugging tools to troubleshoot.  Dev tools in the browser (F12) will show the styles applied to each element which is what we would do to troubleshoot your code.  So you can do it or we can do it, it's up to you.

    Tuesday, January 22, 2019 12:24 PM
  • User283528319 posted

    mgebhard

    fatihbarut

    there is no css or js beside bootstrap and I alreasy sent html

    We cannot reproduce the issue.  That points to code outside the posted snippet affecting the layout.  If you are not willing to post all the relevant code to reproduces the issue on out end,  then you'll need to use standard debugging tools to troubleshoot.  Dev tools in the browser (F12) will show the styles applied to each element which is what we would do to troubleshoot your code.  So you can do it or we can do it, it's up to you.

    let me send the whole card code as <g class="gr_ gr_3 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="3" data-gr-id="3">html</g> again.

    <div class="card border-primary mb-3 shadow ">
    
        <div class="card-header grad text-nowrap" data-toggle="collapse" data-target="#EvrakBilgileri" style="display:inline">
            <div class="row ">
                <div class="col  float-left ">
                    <div style=";  top: 50%;    transform: translateY(-50%);"><h5 style="color:antiquewhite;"> Evrak: 109506</h5></div>
                </div>
                <div class="col-md-2 ">
                    <button class="btn btn-outline-secondary float-right" data-toggle="tooltip" data-placement="top" title="Kaydet">
                        <img src="/images/Device-Floppy-icon32.png" />
                    </button>
                </div>
                <div class="col-md-2 ">
                    <!-- Etiket split button-->
                    <div class="btn-group float-right">
                        <button style="display:inline" type="button" class="btn btn-outline-secondary" data-toggle="tooltip" data-placement="top" title="Etiket bas"> <img src="/images/barcodes-icon32.png" /></button>
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Tekli Etiket</a>
                            <a class="dropdown-item" href="#">Ön İzle</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 ">
                    <button class="btn btn-outline-secondary float-right" data-toggle="tooltip" data-placement="top" title="Yeni Evrak">
                        <img src="/images/documents-icon.png" />
                    </button>
    
                </div>
            </div>
        </div>
        <div class="card-body">
        </div>
    </div>

    Tuesday, January 22, 2019 12:37 PM
  • User475983607 posted

    My best guess is you want something like this...

    <div class="card border-primary mb-3 shadow ">
    
        <div class="card-header grad text-nowrap" data-toggle="collapse" data-target="#EvrakBilgileri" style="display:inline">
            <div class="row ">
                <div class="col  float-left ">
                    <div style=";  top: 50%;    transform: translateY(-50%);"><h5 style="color:antiquewhite;"> Evrak: 109506</h5></div>
                </div>
                <div class="col-md-2 ">
                    <span class="stopEvent">
                        <button class="btn btn-outline-secondary float-right" data-toggle="tooltip" data-placement="top" title="Kaydet">
                            <img src="/images/Device-Floppy-icon32.png" />
                        </button>
                    </span>
                    
                </div>
                <div class="col-md-2 ">
                    <!-- Etiket split button-->
                    
                    <div class="btn-group float-right">
                        <span class="stopEvent">
                            <button style="display:inline" type="button" class="btn btn-outline-secondary" data-toggle="tooltip" data-placement="top" title="Etiket bas"> <img src="/images/barcodes-icon32.png" /></button>
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                        </span>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Tekli Etiket</a>
                                <a class="dropdown-item" href="#">Ön İzle</a>
                            </div>   
                    </div>
                </div>
                <div class="col-md-2 ">
                    <span class="stopEvent">
                        <button class="btn btn-outline-secondary float-right" data-toggle="tooltip" data-placement="top" title="Yeni Evrak">
                            <img src="/images/documents-icon.png" />
                        </button>
                    </span>
                </div>
            </div>
        </div>
        <div class="card-body">
        </div>
    </div>
    <div id="EvrakBilgileri">
        Hello World
    </div>
    
    @section Scripts {
        <script>
            $('.stopEvent').click(function(event) {
                event.stopPropagation();
            });
        </script>
    }

    Tuesday, January 22, 2019 2:42 PM
  • User475983607 posted

    There's also writing your own toggle logic which might be a bit easier but I'm not sure what you're toggling.

        <script>
            $('.card-header').click(function (e) {
                var target = $(event.target);
                if (target.is('button') | target.is('img')) {
                    return;
                }
                else {
                    $('#EvrakBilgileri').toggle();
                }
            });
        </script>

    Oh, forgot to mention remove...

    data-toggle="collapse" data-target="#EvrakBilgileri" 

    ...to write your own toggle logic.

    Tuesday, January 22, 2019 11:29 PM
  • User283528319 posted

    <g class="gr_ gr_9 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="9" data-gr-id="9">There's</g> also writing your own toggle logic which might be a bit easier but I'm not sure what you're toggling.

        <script>
            $('.card-header').click(function (e) {
                var target = $(event.target);
                if (target.is('button') | target.is('img')) {
                    return;
                }
                else {
                    $('#EvrakBilgileri').toggle();
                }
            });
        </script>

    Oh, forgot to mention remove...

    data-toggle="collapse" data-target="#EvrakBilgileri" 

    ...to write your own toggle logic.

    you <g class="gr_ gr_46 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="46" data-gr-id="46">wont</g> believe this. even I removed the line 

    data-toggle="collapse" data-target="#EvrakBilgileri"

    buttons are still <g class="gr_ gr_147 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="147" data-gr-id="147">toggleing</g> even after using the script

    Wednesday, January 23, 2019 6:22 AM
  • User475983607 posted

    you wont believe this. even I removed the line 
    data-toggle="collapse" data-target="#EvrakBilgileri"
    
    buttons are still toggleing even after using the script

    Complete tested example.

        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    <div class="card border-primary mb-3 shadow ">
    
        <div class="card-header grad text-nowrap" style="display:inline">
            <div class="row ">
                <div class="col  float-left ">
                    <div style=";  top: 50%;    transform: translateY(-50%);"><h5 style="color:antiquewhite;"> Evrak: 109506</h5></div>
                </div>
                <div class="col-md-2 ">
                    <button class="btn btn-outline-secondary float-right" data-toggle="tooltip" data-placement="top" title="Kaydet">
                        <img src="/images/Device-Floppy-icon32.png" />
                    </button>
                </div>
                <div class="col-md-2 ">
                    <!-- Etiket split button-->
                    <div class="btn-group float-right ">
                        <button style="display:inline" type="button" class="btn btn-outline-secondary" data-toggle="tooltip" data-placement="top" title="Etiket bas"> <img src="/images/barcodes-icon32.png" /></button>
                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Tekli Etiket</a>
                            <a class="dropdown-item" href="#">Ön İzle</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 ">
                    <button class="btn btn-outline-secondary float-right" data-toggle="tooltip" data-placement="top" title="Yeni Evrak">
                        <img src="/images/documents-icon.png" />
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
        </div>
    </div>
    <div id="EvrakBilgileri">
        Hello World
    </div>
    
    @section Scripts {
        <script>
            $('.card-header').click(function (e) {
                var target = $(event.target);
                if (target.is('button') | target.is('img')) {
                    return;
                }
                else {
                    $('#EvrakBilgileri').toggle();
                }
            });
        </script>
    }

    Maybe there is code elsewhere causing this issue.  Please use the browser's dev tools to debug your code.

    Wednesday, January 23, 2019 12:51 PM