FullCalendar中EventContent插入元素点击事件阻止冒泡问题

我在FullCalendar的eventContent渲染钩子中插入了自定义HTML元素，并用jQuery给该元素绑定了点击事件。目前自定义点击事件可正常触发，但同时FullCalendar的eventClick回调也会执行——我只点击了插入的元素，推测是事件冒泡导致的。

现有代码 #

EventContent渲染钩子：

eventContent: function(arg) {
    var startDt = new Date(arg.event.startStr);
    var endDt = new Date(arg.event.endStr);
    var start = startDt.getHours() + ':' + startDt.getMinutes();
    var end = endDt.getHours() + ':' + endDt.getMinutes();
    
    if(arg.event.extendedProps.stack == true){
        return { 
            html: '<p>'+ start +':' + end +'</p><p>' +arg.event.title +'</p>' +'<span  data-stackid="'+ arg.event.id +'" class="stckNum" >+'+ arg.event.extendedProps.stacknumber +'</span>'
        }
    }
},

jQuery点击事件：

$(document).on('click','.stckNum',function(e){
    var stackedID = $(this).data('stackid');
    console.log(stackedID);
})

生成的HTML结构：

<div class="fc-event-main">
<p>9:30:11:0</p><p>Papageorgiou</p>
<span data-stackid="55" class="stckNum">+1</span></div>

解决方案 #

问题确实是事件冒泡导致的——点击.stckNum元素后，事件会向上传递到其父级的FullCalendar事件容器，从而触发eventClick回调。可以通过以下两种方式解决：

方法1：阻止事件冒泡（推荐）

在自定义元素的点击事件中调用e.stopPropagation()，彻底阻止事件向上传递：

$(document).on('click','.stckNum',function(e){
    e.stopPropagation(); // 阻止事件冒泡到父级元素
    var stackedID = $(this).data('stackid');
    console.log(stackedID);
})

方法2：在eventClick中过滤目标元素

如果无法修改自定义元素的点击事件，可以在eventClick回调里判断点击的目标是否是自定义元素，若是则跳过后续逻辑：

eventClick: function(arg) {
    // 判断点击的目标是否为.stckNum元素
    if($(arg.jsEvent.target).hasClass('stckNum')) {
        return; // 不执行eventClick的后续逻辑
    }
    // 原来的eventClick业务代码
}

内容的提问来源于stack exchange，提问作者Dimitris Papageorgiou