JSFiddle - React, Tailwind, and code Playground

by sunetos

HTML

<div class="colorize bg">Click me to cycle background color</div>
<div class="colorize fg">Click me to cycle foreground color</div>
<div id="direct-click" class="colorize bg">Click me to cycle background color</div>
<p>Click on both of the first two divs in any order/pattern. Eventually the click event will fail to fire in Chrome (tested on Chrome 21). It takes from 5 seconds to 5 minutes to start failing, but it should always eventually fail. The third div should continue to work, as it does not use delegation.</p>
<p>Note that you should not have the developer tools open; it is much much harder to reproduce that way. Load in a fresh browser tab without the developer tools active, and it's much easier to reproduce.</p>

CSS

body {
    font-family: Arial, sans-serif;
}
.colorize {
    border: 1px solid #999999;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 10px;
    background: #EEEEEE;
}
p {
    padding: 5px;
}

JavaScript

var colors = ['#BBBBBB', '#FF3333', '#33FF33', '#3333FF'];
function colorize(e) {
    var newI = (($(this).data('index') || 0) + 1) % colors.length;
    $(this).data('index', newI);
    console.log($(this).data('index'));
    var prop = $(this).is('.bg') ? 'background' : 'color'
    $(this).css(prop, colors[newI]);
    return false;
}
$(document).on('click', '.colorize', colorize);
$(window).on('click', '.colorize', colorize);
$(function() {
    $('#direct-click').click(colorize);
});

// Fill up with a bunch of delegated events.
for (var i = 0; i < 500; ++i) {
    $(document).on('click', '.dummy-' + i, function() {});
    $(window).on('click', '.dummy-' + i, function() {});
}