Click Handler in HTML inside FC event-CodePudding

I am using EventContent RenderHook to insert HTML in an event. And I am trying to attach a jquery click handler to it. Despite that the handler fires - the handler related with eventClick also fires, I do not want that since the mouse pointer points to the element inserted with eventContent. It seems that bubbling takes place - i am not sure though.

Here is the code I tried

 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  '"  > ' 
 arg.event.extendedProps.stacknumber  '</span>'
      }
      }
    },

Here is the Jquery Handler:

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

    })

stackedID is pritend in the console but also eventClick callback. fires as stated. Here is the how the HTML looks like:

<div >
<p>9:30:11:0</p><p>Papageorgiou</p>
<span data-stackid="55" > 1</span></div>

CodePudding user response：

I found another solution after all. The eventclick callback has as argument an event object...this object contains jsEvent low - level information. By looking through the DOM properties I can see exactly to which element the user clicked and based on that within eventClick callback I can act accordingly.

The code is like this:

 eventClick: function (info) {
     
      //look through low level info to find exactly where the user clicked and if that is the stack number send and ajax request to bring the hidden events
   
       console.log(info.jsEvent);
       if(info.jsEvent.target.className == 'stckNum'){//icon clicked within event div...make and ajax request to bring hidden events
       }else{
//proceed with normal eventClick
       }

CodePudding user response：

To prevent the eventClick callback from firing when you click on the .stckNum element, you can stop the event propagation using event.stopPropagation() in your jQuery click handler.

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