父div与子div点击事件同时触发，如何阻止父元素事件执行？

点击带有data-link的父div（class为prgOzet）内的子div（class为yeniekle，绑定了YeniProgramModal点击事件）时，会同时触发父子元素的事件，父div的事件也会被触发。尝试通过设置tooltipster样式阻止无效，求解决方法。

相关代码：

HTML代码 #

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

JavaScript代码 #

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

这是事件冒泡导致的问题：点击子元素时，事件会沿着DOM树向上传播，触发父元素的绑定事件。以下是几种解决方法：

方法1：直接在onclick中阻止冒泡 #

修改子div的onclick属性，添加事件阻止逻辑：

<div class="yeniekle hidden-print" onclick="YeniProgramModal(0,'@string.Format("{0:00}", Trh.Hour):00','@(Trh.ToString("dd-MM-yyyy"))'); event.stopPropagation();">
    <span><i class="fa fa-plus"></i> yeni ekle</span>
</div>
`event.stopPropagation()`会终止事件向上传播，父元素的事件就不会被触发。

### 方法2：在函数内部阻止冒泡
如果不想修改HTML，可以在`YeniProgramModal`函数内添加阻止逻辑：
```javascript
function YeniProgramModal(ID, sa, tarih, TurID) {
    // 兼容不同浏览器的事件阻止冒泡
    if (window.event) {
        window.event.cancelBubble = true;
    } else {
        arguments.callee.caller.arguments[0].stopPropagation();
    }

    $('.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');
}

方法3：用jQuery绑定事件（推荐） #

如果项目使用jQuery，建议移除内联onclick，改用事件绑定，更易维护：

// 绑定子元素点击事件
$(document).on('click', '.yeniekle', function(e) {
    e.stopPropagation(); // 阻止冒泡
    // 从元素属性获取参数
    let sa = $(this).data('sa');
    let tarih = $(this).data('tarih');
    YeniProgramModal(0, sa, tarih);
});

对应的HTML修改为：

<div class="yeniekle hidden-print" data-sa="@string.Format("{0:00}", Trh.Hour):00" data-tarih="@(Trh.ToString("dd-MM-yyyy"))">
    <span><i class="fa fa-plus"></i> yeni ekle</span>
</div>

内容的提问来源于stack exchange，提问作者Büşra Güler