Запустить контейнер DIV по щелчку вместо содержимого внутри

Question

Я хочу добавить событие onclick для контейнера DIV.

<div id="click_div" onclick="alert('test');" style="cursor: pointer">
     <td id="leftContainer" class="form-basic">
     ...
     </td>
</div>    

Теперь у меня есть этот код, внутри <td> есть свойство css: pointer-events: none;

Поэтому я не могу добавить событие onclick к нему, но я хочу, чтобы это событие click было на внешнем <div>, поэтому везде, где я нажимаю на пространство <td>, событие будет вызываться.Код, который я разместил здесь, не работает, у вас есть идеи?

Если у вас есть другая идея, которая позволит мне щелкнуть внутри <td> со свойством no-events, то все будет в порядке (я не могу изменить <td> css и свойства)

Answer 1

Прежде всего, ставить <div> внутри таблицы не правильно.

Вы можете поймать свой <td> в javascript и зациклить их, чтобы добавить события onclick.Просто помните, что document.getElementsByTagName возвращает NodeList , поэтому вам нужно перебрать эти элементы, чтобы добавить событие.

Если вы не можете поймать / не хотите - ваш <td> вы можете захватить, например, <table> или глобальный <div> перед вашим столом, вы сможете щелкнуть везде и запустить событие.

function Ping(){
    alert("Pong!");
}

function tdClick () {
  var myTags = document.getElementsByTagName("td");
  for (var i=0;i<myTags.length;i++){
      myTags[i].addEventListener('click', Ping);
  }
}


function tableClick() {
  var myTag = document.getElementById("my-table");
  myTag.addEventListener('click', Ping);
}

// call tdClick() or tableClick()
tdClick();

table {background-color: red; padding: 40px;}
table tr td {cursor: pointer; padding: 20px;border: 1px solid black;}

<div>
  <table id="my-table">
    <tr>
    <!-- A division here is NOT correct -->
      <td>
        <!-- A division here is correct -->
        Text here
      </td>
      <td>
        <!-- A division here is correct -->
        Text there
      </td>
    <tr>
  </table>
</div>

Answer 2

Почему у вас есть div, обертывающий ваш элемент <td>?Я считаю, что это недопустимая разметка HTML и может иметь непредсказуемое поведение в разных браузерах.

На странице MSDN тега td

Разрешенные родители: A <tr> element.

Из нескольких экспериментов, основанных на фрагменте ниже, если ваш <td> находится внутри div внутри tr, то хром рефакторирует его, чтобы переместить элемент divза пределами таблицы.

Событие click не работает, потому что div находится не рядом с td, а где-то вне таблицы.

Аналогично, вы не можете видеть установленный цвет фонапоскольку div, вероятно, имеет нулевую высоту (у него ничего нет внутри, td находится внутри таблицы, div теперь снаружи).Установите значение padding:20px или height в div, чтобы увидеть, где оно на самом деле появляется.(Вы также можете проверить это в инструментах разработчика, если вы используете браузер, в котором он есть)

td {
  pointer-events: none;
  background: green;
}

div {
  background: red;
  padding: 20px;
}

<table>
  <tr>
    <div onclick="alert('Hello')" class="container">
      <td class="inner">
        test
      </td>
    </div>
  </tr>
</table>