Форум

Rig · #1 (**permalink**) 13.07.2012, 21:10

Прошу прощения если не очень грамотно сформулировал вопрос. Суть в следующем — на строки таблицы повешена определённая функция

<tr onclick=.... и т.д>
<td><a href=...>...</a></td>
<td>...</td>
...
</tr>

понятно, что функция срабатывает при клике в любой области строки, а вот как сделать чтобы, например, при щелчке в ячейке, где размещена ссылка, функция не срабатывала?

cyber · #2 (**permalink**) 13.07.2012, 21:28

при клике по ссылке или при клике по ячайке внутри которой ссылка?

Rig · #3 (**permalink**) 13.07.2012, 22:00

При клике на ячейке в которой ссылка (включая и ссылку, конечно).

lord2kim · #4 (**permalink**) 13.07.2012, 22:28

как вариант, добавьте в начало функции(-й), повешенной(-ых) на строки таблицы, что-то типа такого

function click_tr(e) {
   if (typeof(e.target.href) != "undefined") {
        return true;
   }
   //остальной код функции
}

oneguy · #5 (**permalink**) 13.07.2012, 22:28

Нужно повесить ещё обработчик на ячейку, содержащую ссылку, и в нём вызвать event.stopPropagation();

lord2kim · #6 (**permalink**) 13.07.2012, 22:31

Сообщение от oneguy

Нужно повесить ещё обработчик на ячейку, содержащую ссылку, и в нём вызвать event.stopPropagation();

и event.cancelBubble=true для IE

cyber · #7 (**permalink**) 13.07.2012, 22:31

вот так

<!DOCTYPE HTML>
<html>
  <head> 
  
    <style>
      td{
        width:50px;
        height:50px;
        border:1px solid black;
      }
    
    </style>
  </head>
  <body>
   
    <table id='tb'>
      <tr><td>1</td></tr>
    <tr><td>2</td></tr>
      <tr><td><a href='#'> 3</a></td></tr>
      <tr><td>4</td></tr>
    </table>
    <script>

      document.getElementById('tb').onclick = function (e){
       
         var target = e&&e.target || event.srcElement;
      
        if(target.tagName == 'TD'){
        
          search(target)
        
        } else if(target.tagName == 'A')alert('link');
        return false;
      }
        function search(elem){
         
           var tags = elem.getElementsByTagName('a');
          if(tags.length)return;
          alert('ссылок нет');
        }

    </script>

  </body>
</html>

oneguy · #8 (**permalink**) 13.07.2012, 22:39

Сообщение от lord2kim

event.cancelBubble=true для IE

Точнее, для IE<9. В IE 9 stopPropagation работает нормально.

Rig · #9 (**permalink**) 13.07.2012, 22:41

Ого, сколько вариантов! Сейчас буду все пробовать, спасибо всем за помощь. Отпишусь обязательно!

bes · #10 (**permalink**) 13.07.2012, 23:22

<style>
  td {
    border: solid 1px;
    cursor: pointer;
    padding: 1em;
  }
</style>
<table id="table">
  <tr>
    <td>нет ссылки</td>
    <td><a href="#">ссылка</a></td>
    <td>нет ссылки</td>
  </tr>
  <tr>
    <td>нет ссылки</td>
    <td><a href="#">ссылка</a></td>
    <td>нет ссылки</td>
  </tr>
<table>

<script>
window.onload = function () {
  var table = document.getElementById('table');

  table.onclick = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;
    if (target.parentNode.tagName == 'TR') {
      if (target.innerHTML.search('href') == -1) {
        alert('здесь ссылки нет')
      } else {
        alert('ячейка со ссылкой')
      }
    } else if (target.tagName == 'A') {
      alert('ссылка')
    }
  }

}
</script>

Форум

Справочник

Discord чат

Курсы javascript