The onclick in the parent div and the parameterized function in the other div are triggered at the same time. How do I prevent the parent from firing?

Question

<div class="@renkClass prgOzet" data-link="@Url.Action("ProgramOzetTooltip", "Program", new { ID = item.ID, area = "yonetim", TurID = item.TurID,Tarih=item.Tarih.Value.ToString("dd.MM.yyyy HH:mm") })">
   @if (Fonksiyonlar.YetkiKontrol("Program Ekle##") && isPrgGosterim && !Model.Filtre.isDisardan && (!isKisitli ||
   (isKisitli &&((GunSinir == (int)Sabitler.ProgramGunSinir.SadeceGecmis && Trh.Date >= BugunBas) ||
   (GunSinir == (int)Sabitler.ProgramGunSinir.SadeceGelecek && Trh.Date <= BugunSon) ||
   (GunSinir >= 0 && (Trh.Date >= SinirBasTarih && Trh.Date < SinirBitTarih))))))
   {
    <div class="yeniekle hidden-print" onclick="YeniProgramModal(0,'@string.Format("{0:00}", Trh.Hour):00','@(Trh.ToString("dd-MM-yyyy"))');"><span><i class="fa fa-plus"></i> yeni ekle</span></div>
   }

prgOzet datalink and yeniekle onclick are triggered at the same time. Clicking yeniekle triggers on prgOzet. How do I get only yeniekle to trigger

 function YeniProgramModal(ID, sa, tarih, TurID) {
    $('.tooltipster-base').css('pointer-events', 'none');
    $('#HizliKayitEkle iframe').attr("src", "/yonetim/program/HizliKayit?ID=" + ID + "&sa=" + sa + "&GelisTarihi=" + tarih + "&TurID=" + TurID);
    $('#HizliKayitEkle iframe').attr("height", $(window).height());
    $('#HizliKayitEkle').modal();
    $('.tooltipster-base').css('opacity', '0');
  }

I added tooltipster display none to prevent other one from opening when YeniProgramModal is opened but it didn't work

score 1 · Accepted Answer · answered Jan 03 '23 at 23:11

1

Use basic event Object methods inside an event handler.

To stop propagation up the DOM tree, event.stopPropagation(),
To stop immediate propagation to other event listeners added to the same element , event.stopImmediatePropagation(), and
To prevent browser default actions for the event (e.g. pressing space to scroll down the page in a keyboard event handler), event.preventDefault().

These event methods are also documented in jQuery API documentation.

answered Jan 03 '23 at 23:11

traktor

17,588
4
32
53

but my function is parameterized so I can say event doesn't it need to be a function(event)? – Büşra Güler Jan 03 '23 at 23:29
my function YeniProgramModal() – Büşra Güler Jan 03 '23 at 23:36
Sorry, I thought it should be in the form of function(event), but now it's fixed by adding event.stopPropagation() directly. Thank you very much :) – Büşra Güler Jan 03 '23 at 23:50
If it helps make it clearer, the event handler is an anonymous function generated when the HTML parser processes the `
` tag in HTML source - `YeniProgramModal` is not the event handler. An [older answer of mine about `this` values](https://stackoverflow.com/a/50744889/5217142) goes into more detail about the legacy usage of `oneventname` attributes
– traktor Jan 04 '23 at 01:00

The onclick in the parent div and the parameterized function in the other div are triggered at the same time. How do I prevent the parent from firing?

1 Answers1