JavaScript « При клике на дочерний элемент вызывается обработчик родителя

Есть кусок html
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<tr>
  <td>
    <input id="some_id" type="checkbox" />
  </td>
<tr>
 


На строку (tr) и на чекбокс вешается обработчик клика при помощи jQuery. Примерно так
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

$("tr").click(function() { /*...*/ });
$("#some_id").click(function() { /*...*/ });
 


При клике на чекбокс также срабатывает и обработчик клика по строке. Как этого избежать?

Заранее благодарен за ответы.
0
events jquery onclick

1 ответов

Все достаточно просто)

Если бы вы использовали только чистый Javascript, то Вам понадобилось бы написать примерно следующую функцию:


function stopEvent(evt) {
  (evt && evt.stopPropagation) ? evt.stopPropagation() : window.event.cancelBubble = true;
}
 
А так как в любой обработчик в качестве параметра передается само событие, то в нужно было бы делать как-то так:

function start(evt) { // функция, которую мы бы использовали в качестве обработчика)
  stopEvent(evt);
}
 
НО! Вы же используете JQuery. И в этом случае все значительно проще, так как уже есть готовая функция, а Вам достаточно сделать так:

$("tr").click(function() { /*...*/ });
$("#some_id").click(function(event) {
      event.stopPropagation();
      /*...*/
});
 
Вот и все, достаточно просто объявить входящий параметр, который передается всегда и использовать уже имеющуюся функцию)
Надеюсь помог)
4

Можно еще через e.target


...
if( (name = e.target || e.srcElement).tagName && name.toLowerCase() == 'tr' ) {
   ...
}
...
 
Но такой вариант более применим к конструкции типа

$('table').click(fn)
 
И когда ТР\ок 30+ =)
0