JSFiddle - React, Tailwind, and code Playground

HTML

<div>Bug report: JQuery click handling browser inconsistency example:</div>

<div class="container clickable">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. </div>
    <div class="vote">Vote: <button class="digg">digg</button><button class="bury">bury</button></div>
</div>

<div>The red div is clickable. Try clicking in the text. Console ouputs "Container got clicked". Fine.<br/> When clicking the buttons in Firefox or Chromium, you get either digg or bury in the console, but you don't get the "Container got clicked" message. Fine.
</div>

Adding the .clickable class to the buttons, we have a different comportement between Firefox and Chromium:
With FFox, only the $('.digg').click handler is triggered. With Chromium, $('.clickable').click is also triggered (first).

<div class="container clickable">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. </div>
    <div class="vote">Vote: <button class="digg clickable">digg</button><button class="bury clickable">bury</button></div>
</div>

This is not really an issue for me as adding the "clickable" class on the buttons was indeed a mistake, but I found this behaviour surprizin so you may want to give it a look.

CSS

.container{
    width: 300px;
    border: 1px solid red;
    margin: 10px
}

.vote{
    text-align: right
}

JavaScript

$('.clickable').click(function () {
    console.debug('Container got clicked! '+this.className);
});

$('.digg').click(function (event) {
    event.stopPropagation();
    console.debug('digg!');
});

$('.bury').click(function (event) {
    event.stopPropagation();
    console.debug('bury!');
});