Question

我正在使用具有可点击行的数据表（https://datatables.net）。这是我的代码：

pull_request

在那些可点击的行中，我有一个选择框，onchange调用该函数。看起来像这样：

release

我遇到的问题是，在Chrome（不是Safari）中，单击选择框后，我收到了警报。我需要这样做，所以单击选择框不会触发警报。我该怎么办？

谢谢！

Answer 1

我这样做是可行的，

$('#resdatatable tbody').on('click', 'tr', function (e) {
if($(e.target).is('select')){
        e.preventDefault();
        return;
    }
};

提到的其他方法破坏了整个点击功能。

Answer 2

您可以通过检查目标元素来做到这一点。我组成了一些您可以测试的通用小提琴。我相信这就是您想要做的。现在，当您单击select元素时，您将不会收到该警报消息，但是，如果在其他任何地方单击tr，您将看到警报消息。

提琴：https://jsfiddle.net/7136cyhp/1/

$(document).ready(function() {
  // let city = document.getElementById("cityselect").value;
  // var table = $('#resdatatable').DataTable();

  $('table td').on('click', function (e) {
    if (e.target !== this) {
      return;
    } else {
      //var data = table.row( this ).data().id;
      alert ("clicked!");
    }
  });
});

table {
  width: 100%;
  border: 1px solid;
}

tr {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select id="test">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
      </select>
    </td>
  </tr>
</table>

Answer 3

一种简单而干净的方法是在事件上使用stopPropagation函数-这样可以防止事件使DOM树冒泡，因此不会通知父元素上的事件处理程序。如果将其应用于select上的点击，则不会触发任何附加到父单元格或行等的事件。

演示：

$('#resdatatable tbody').on('click', 'select', function(e) {
  e.stopPropagation();
});

$('#resdatatable tbody').on('click', 'tr', function(e) {
  alert("hello");
});

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid #cccccc;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="resdatatable">
  <tbody>
    <tr>
      <td>Hello, you can click this bit</td>
      <td>
        <select>
          <option>Clicking this won't fire the event</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

排除选择菜单形式onclick onclick事件

3 个答案: