Остановить распространение родительского элемента onclick, но разрешить открывание/закрытие раскрывающегося списка и события элемента меню для выпадающего списка Bootstrap?

Question

У меня есть таблица jQuery DataTables с опцией select (строки выбираются при нажатии). Проблема, с которой я сталкиваюсь, - это щелкнуть по кнопке выпадающего меню и выпадающим меню, чтобы выбрать базовую строку. Как я могу предотвратить базовые td/tr/DataTable select событиями щелчка, но разрешить dropdown и его пункты меню (li a детей) щелкнуть события?

<table id="datatable"> 
    <tr> 
    <td> 
     <div class="dropdown"> 
     <button type="button" class="dropdown-toggle" data-toggle="dropdown"> 
      <i class="fa fa-caret-down"></i> 
     </button> 
     <ul class="dropdown-menu"> 
      <li><a href="#" class="action">Action</a></li> 
     </ul> 
     </div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <div class="dropdown"> 
     <button type="button" class="dropdown-toggle" data-toggle="dropdown"> 
      <i class="fa fa-caret-down"></i> 
     </button> 
     <ul class="dropdown-menu"> 
      <li><a href="#" class="action">Action</a></li> 
     </ul> 
     </div> 
    </td> 
    </tr> 
</table> 

<script> 
    $("#datatable").DataTable({ select: true }); 
</script> 

Я попытался с помощью e.stopPropagation(), но это предотвращает выпадающее меню показа:

<script> 
    $("#dataTable tbody").on("click", "button", function (e) { 
    e.stopPropagation(); // this prevents dropdown menu from showing 
    }); 
</script> 

Я также попытался вручную переключая выпадающий список, но это ввели странное поведение выпадающего (например, нажав кнопку выпадающая кнопка одной строки показала его выпадающее меню, но не скрывала раскрывающиеся меню других строк, которые уже были открыты):

<script> 
    $("#dataTable tbody").on("click", "button", function (e) { 
    $(this).closest("div.dropdown").toggleClass("open"); // weird effects 
    // or: 
    $(this).closest("div.dropdown").find("ul.dropdown-menu").toggle(); // weird effects 

    e.stopPropagation(); 
    }); 
</script> 

Я также попытался dropdown("toggle"), но, хотя это решило вышеупомянутое странное поведение, тем не менее, помешал кликам события для элементов меню:

<script> 
    $("#dataTable tbody").on("click", "button", function (e) { 
    // no weird behavior, but now menu item click events are disabled 
    $(this).closest("div.dropdown").find("ul.dropdown-menu").dropdown("toggle"); 

    e.stopPropagation(); 
    }); 
</script> 

Answer 1

Оказывается jQuery DataTables обеспечивает обработчик события user-select.dt для ситуаций, таких как это. Я смог получить все функциональные возможности, необходимые для правильной работы, со следующим:

<script> 
    $("#datatable").DataTable({ 
    select: true 
    }).on("user-select.dt", function (e, dt, type, cell, originalEvent) { 
    var $elem = $(originalEvent.target); // get element clicked on 
    var tag = $elem[0].nodeName.toLowerCase(); // get element's tag name 

    if (!$elem.closest("div.dropdown").length) { 
     return; // ignore any element not in the dropdown 
    } 

    if (tag === "i" || tag === "a" || tag === "button") { 
     return false; // cancel the select event for the row 
    } 
    }); 
</script>