Hay un elemento div que contiene 1 o más elementos secundarios de tipo select. Cuando se hace clic en div (my_title), sort() tiene que ejecutarse (OK). Si se selecciona un valor de select (my_select), sort() también se ejecuta, pero no debería. Intenté agregar un controlador de clics y llamar a stopPropagation() pero todavía se llama a sort(). De hecho, sort() se llama primero y solo luego stopPropagation().
<div id="my_title" onclick="sort("sf", "2", event)" style="top: 0px; left: 1px; width: 300px; height: 50px; text-align: center; position: absolute;"> Column 2 <select id="my_select" style="top: 1px; left: 0px; width: 297px; position: relative;" > <option value="1">1</option> <option value="2">2</option> </select> </div>JavaScript:
function sort() { console.log('sort'); } $('#my_title').on('click', '> select', function(event) { console.log('stopPropagation'); event.stopPropagation(); // event.cancelBubble = true; // event.stopImmediatePropagation(); });Parece que ese comportamiento ocurre cuando usas onclick="..."
Intenta usar esto en su lugar:
$('#my_title').on('click', function(event) { sort() })No puede detener la propagación de eventos entre el elemento de destino y el padre delegado cuando utiliza un controlador de eventos delegado. Esto se debe a que el evento necesita propagarse por el DOM desde el elemento que genera el evento al que está vinculado el controlador.
Una mejor solución en este caso es determinar qué elemento generó el controlador de eventos de click y luego solo llamar a sort() si era el elemento #my_title .
También tenga en cuenta que su JS se puede mejorar. En primer lugar, no debe vincular los controladores de eventos JS ni agregar estilo al HTML. Deben colocarse en archivos JS y CSS externos, respectivamente.
Además, los controladores de eventos deben vincularse discretamente (como lo hace con el elemento de select ) sin usar atributos onX obsoletos que son una mala práctica.
Finalmente, use el evento de change en la select para escuchar actualizaciones, no el evento de click .
Con todos esos puntos abordados, su código debería verse así:
jQuery($ => { $('#my_title').on('click', e => { let $el = $(e.target); if ($el.is('#my_title')) sort($el.data('sort-key'), $el.data('sort-value')); }); $('#my_title').on('change', '> select', function(event) { // change handler logic here... console.log('change'); }); }); let sort = (key, value) => { // your sort logic here... console.log(key, value); } #my_title { top: 0px; left: 1px; width: 300px; height: 50px; text-align: center; position: absolute; } #my_select { top: 1px; left: 0px; width: 297px; position: relative; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="my_title" data-sort-key="sf" data-sort-value="2"> Column 2 <select id="my_select"> <option value="1">1</option> <option value="2">2</option> </select> </div>Cambie su clasificación a algo como esto:
function sort(a, b, e) { if (e.target.id === 'my_title') { // or use more generic comparison console.log('sort'); } }Solo se ejecutará para elementos que sean mucho de su comparación (por ejemplo, su Etiqueta/Título