Всплытие и перехват события
 

Здравствуйте!

Скажите пожалуйста, как данную конструкцию можно переписать, как на проверку содержания определенного класса а не тэга?
Спасибо

/* нужно
if (event.target.classList.contains('class')) {
*/

table.onclick = function(event) {
  var target = event.target;
  while (target != table) {
    if (target.tagName == 'TD') {
      highlight(target);
      return;
    }
  }
}

table.onclick = function(event) {
  var target = event.target;
  while (target != table) {
    if (target.classList.contains('class')) {
      highlight(target);
      return;
    }
  }
};

что сложного?

j0hnik,
Супер, спасибо большое

:-? а почему цикл не бесконечный?

видимо highlight(target);

???

:write: либо цикл не нужен, либо нужно добавить target = target.parentNode

<div id="table">
	<div class="cl xxx">
		<div class="cl">нажми</div>
	</div>
</div>

	<script>

function highlight(el){
el.parentNode.click();
}

table.onclick = function(event) {
  var target = event.target;
  console.log(target);
  while (target != table){
    if (target.classList.contains('cl')) {
      highlight(target);
      return;
    }
  }
};
</script>

это конечно полная хрень, но highlight может обойти до table

Проблема, наверное, в том что он бесконечный
Без цикла

<table class="class">
   <tr>
        <td>0</td><td class="class">1</td><td>0</td><td class="class">2</td>
   </tr>
   <tr>
        <td>0</td><td class="class">3</td><td>0</td><td class="class">4</td>
   </tr>
</table>
<script>
function highlight(item) {
   item.style.backgroundColor = "lightgreen";
}
var table = document.querySelector('table');
table.onclick = function(event) {
  var target = event.target;
  if (target != table && target.classList.contains('class')) {
      highlight(target);
  }
};
</script>

Проверка target != table имеет смысл только если и у table есть class="class"

Dilettante_Pro,
цикл с
надёжнее

<td class="class"><span>00000000000000</span></td>