UI resizable for table cells in Firefox and Chrome. Why does it work differently?

Question

JavaScript

Hello, I have a small plugin for dynamically changing the row height and column width of a table using UI resizable (essentially it works like this - when a cell is resized, the corresponding row height and column width change, but the size of the cell itself does not change).
I can't figure out why Firefox doesn't fire the stop event when a cell is stretched. That is, when the mouse is released, the resizing continues as if the handler (arrow) is stuck to the mouse. Works fine in chrome

Code snippet where resizing happens:

// При наведении на ячейку таблицы
$(table).find('td, th').hover(function(event) {
event.preventDefault();
event.stopPropagation();

// $tr и $th - это строка и столбец, которым соответствует текущая ячейка
var $th = $(table).find('th[data_x="'+$(this).attr('data_x')+'"]');
var $tr = $(this).parent('tr');

// $(this) - это текущая ячейка
$(this).resizable({
  minWidth: 25,
  resize: function(event, ui) {
    event.preventDefault();
    event.stopImmediatePropagation();

    // Убирает выделение всех ячеек (вспомогательная функция)
    myTable.deselectAll();

    // Изменяем ширину столбца и высоту строки (соответствующие текущей ячейке)
    $th.css('width', ui.size.width+'px');
    $tr.css('height', ui.size.height+'px');
  },
  stop: function (event, ui) {

    // В Firefox'e это не выводится в консоль!
    console.log('resize stopped!');

    // Убираем стили высоты и ширины текущей ячейки, так как в процессе ресайцинга мы уже изменили высоту строки ($tr) и ширину столбца ($th) (см. выше)
    if (ui.element.is('td')) ui.element.css({width: '', height: ''});
      else if (ui.element.is('th')) ui.element.css({height: ''});
  }
});

Answer 1

event.stopImmediatePropagation();
https://developer.mozilla.org/en/docs/Web/API/Even...