禁用单列的点击事件答案

【问题标题】：Disable on-click event for single column禁用单列的点击事件
【发布时间】：2016-01-12 17:53:29
【问题描述】：

谁能告诉我如何禁用特定列的点击事件。

场景：我们在表格中显示用户详细信息，一旦单击表格行，弹出对话框窗口将显示更多详细信息（调用 ajax 请求从数据库中检索详细信息）。但是我们的约束是禁用与表关联的单个列的单击事件。

例如：

<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td id = "disableClick"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>

如果点击文本（第一列和第二列），它将在点击事件上调用。但是，如果用户点击超链接（第 3 列），我想将其重定向到 Google，而不是点击事件（测试（））。

谁能帮我实现这个目标。

【问题讨论】：

你能分享你的表格标记吗？
一些代码，任何代码，在这里都会有很长的路要走
@adeneo 得到了两个支持。很棒。

标签： javascript jquery css html jquery-plugins

【解决方案1】：

尝试：

$(function() {
  $('table td').on('click', function() {
    if ($(this).index() == 2) {
      return false; // disable 3rd column
    }
  });
  $('table tr').on('click', function() {
    alert('You click the row');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>

【讨论】：

感谢 jcubic ，但问题是我的第三列包含超链接。一旦点击了链接，我希望它重定向到给定的地址，而不是点击事件。你能帮我实现这个目标吗
第 4 列中的@Krupa 链接应该可以工作，您只需禁用点击 td。
@Krupa 另一种解决方案是添加e.stopPropagaion() 以点击标签。

【解决方案2】：

通过 CSS 实现

table td:nth-child(2) {
    pointer-events: none;
}

【讨论】：

谢谢拉希尔。但问题是我的第三个包含超链接。一旦点击了链接，我希望它重定向到给定的地址，而不是点击事件。你能告诉我如何实现这一目标
@Krupa 不会在 tr 上调用点击事件通过 jquery 在 td 上调用它 $('table td:not(#disableClick)').click(function(){ alert('test'); });

【解决方案3】：

如何将您的点击事件添加到列中，然后使用.unbind() 删除该事件。这将删除被点击的列的事件，但任何其他的应该仍然有效。

$( '.column' ).on( 'click', function()
{
    // do ajax stuff... 

    // remove event 
    $( this ).unbind(); 

});

【讨论】：

【解决方案4】：

如果只希望点击事件运行一次，理论上可以使用 jquery 的.one() 功能而不是.on()。这将在运行一次后自动取消绑定事件。当然这意味着你必须在之后再次绑定事件（如果你需要的话）

http://api.jquery.com/one/

例如

$('.selector').one('click', function(){
    // your callback functionality
});

您可以做的另一件事是以某种方式检查popup 是否处于活动状态，如果是，则阻止点击处理程序运行

例如

$('.selector').on('click', function(){
    if (check_if_popup_is_active) {
        return;
    }
    // otherwise continue with
    // your callback functionality
});

【讨论】：

【解决方案5】：

您可以在回调中使用 jQuery .unbind() 函数。

以下表为例

<table>
  <tr>
    <th class='foo'>bar</th>
  </tr>
</table>

我们可以在th.foo 上停止onclick 事件，如下所示

$('th').on('click', '.foo', function() {
  var that = this;

  // your AJAX call goes here

  success: function() {
    $(that).unbind('click');
  }
});

【讨论】：

【解决方案6】：

你可以通过 CSS 做到这一点

you_css_selector {pointer-events:none;}

【讨论】：