Выбор Таблица TD без TR

Question

У меня есть HTML таблицу, как это:

<table> 
    <tr onClick="someFunc();"> 
    <td>Foo</td> 
    <td><button onClick="anotherFunc();">Bar</button></td> 
    </tr> 
</table> 

и Javascript:

function somefunc(){ 
    alert("Foo"); 
} 
function anotherfunc(){ 
    alert("Bar"); 
} 

Проблема заключается в том, когда я нажимаю на тр работает нормально, но когда я нажимаю на кнопку внутри TD он запускает обе функции, поэтому я хочу, когда я нажимаю на кнопку, чтобы просто запустить функцию кнопки.

Answer 1

Для начала не используйте встроенный обработчик с jQuery. Это отделяет обработчик от регистрации без уважительных причин и приводит к проблемам обслуживания. Используйте классы или идентификаторы для соответствия элементам и используйте обработчики jQuery.

Проблема распространения событий. Для того, чтобы остановить щелчок распространяющихся использовать e.stopPropagation() в обработчике:

<table> 
    <tr class="doSomeFunc"> 
    <td>Foo</td> 
    <td><button class="doAnotherFunc">Bar</button></td> 
    </tr> 
</table> 

$('.doSomeFunc').click(function(e){ 
    alert("Foo"); 
}); 

$('.doAnotherFunc').click(function(e){ 
    e.stopPropagation(); 
    alert("Bar"); 
}); 

Если вы хотите придерживаться существующей без JQuery кода, просто изменить:

<button onClick="anotherFunc();return false;"> 

return false из обработчика мыши делают то же самое, что и e.stopPropagation()иe.preventDefault().

Answer 2

Действие click распространяется на все родительские элементы button. Чтобы остановить это, используйте event.cancelBubble = true (или, если вы используете jQuery, вы можете использовать event.stopPropagation()) в событии click.

Answer 3

Вы должны использовать e.stopPropagation();

Предотвращает событие от бурлит дерева DOM, предотвращая любые родительские обработчики из уведомления о событии https://api.jquery.com/event.stoppropagation/

Вот демо: https://jsfiddle.net/j81czwky/

$("tr").click(function(e){ 
    alert("Foo"); 
}) 

$("button").click(function(e){ 
    e.stopPropagation(); 
    alert("Bar"); 
}); 


<table> 
    <tr> 
    <td>Foo</td> 
    <td><button>Bar</button></td> 
    </tr> 
</table>